var ThreadBox = View.extend({
  el: "#threads",
  
  events: {
  },
  
  initialize: function(){
    this.__super__.initialize.call(this)
    this.template = this.$(".template").html()
    this.keywordTemplate = this.$(".keywordTemplate").html()
    this.welcomeTemplate = this.$(".welcomeTemplate").html()
    this.profileTemplate = this.$(".profileTemplate").html()
  },
  
  load: function(data){
    if (this.options.welcome) {
      this.appendWelcome()
    }
    if (data.keyword) {
      this.appendKeyword(data.keyword)
      this.appendThreads(data.threads)
    }
    else if (data.user) {
      this.appendProfile(data.user)
      this.appendThreads(data.threads)
    }
    else {
      if (this.options.latest) {
        var latest = data.threads.sort( (a,b) => {
          return b.lastmodified - a.lastmodified
        }).slice(0, 7)
        this.appendThreads(latest)
        data.threads = data.threads.filter((thread) => thread && !! thread.keyword)
      }
      var keywords = {}
      data.threads.forEach((thread) => {
        var keyword = thread.keyword || 'unsorted'
        keywords[keyword] = keywords[keyword] || []
        keywords[keyword].push(thread)
      })
      Object.keys(keywords).sort().forEach((keyword) => {
        this.appendKeyword({ keyword })
        this.appendThreads(keywords[keyword].sort( (a,b) => {
          return a.title.localeCompare(b.title) // b.lastmodified - a.lastmodified
        }))
      })
    }
    if (is_mobile || window.innerWidth < 700) {
      $('.ledger .keyword').each(function(){
        $('td:nth-child(2)', this).prepend($("td:nth-child(1)", this).html())
      })
    }
  },
  
  parse: function(thread){
    var views = hush_views(thread.viewed)
    var size = hush_size(thread.size)
    var comments = hush_null(thread.comment_count || 0, "c")
    var files = hush_null(thread.file_count || 0, "f")
    var dot = privacy_dot(thread.privacy)
    var datetime = verbose_date(thread.lastmodified)
    var age = get_age(thread.lastmodified)
    var id = thread.id + get_revision(thread)

    var t = this.template
                .replace(/{{id}}/g, id)
                .replace(/{{username}}/g, thread.username)
                .replace(/{{privacy_dot}}/g, dot)
                .replace(/{{title}}/g, thread.title)
                .replace(/{{date}}/g, datetime[0])
                .replace(/{{time}}/g, datetime[1])
                .replace(/{{date_class}}/g, carbon_date(thread.lastmodified) )
                .replace(/{{views}}/g, views[1])
                .replace(/{{comments}}/g, comments[1])
                .replace(/{{files}}/g, files[1])
                .replace(/{{size}}/g, size[1] )
                .replace(/{{views_class}}/g, views[0])
                .replace(/{{comments_class}}/g, comments[0])
                .replace(/{{files_class}}/g, files[0])
                .replace(/{{show_files}}/g, thread.file_count == 0 ? "hidden" : "")
                .replace(/{{size_class}}/g, size[0] )
                .replace(/{{color}}/g, thread.color || "blue" )
    var $t = $(t)
    if (app.debug) {
      var $title = $t.find('.title a')
      var href = $title.attr('href')
      $title.attr('href', href + '?debug')
    }
    if (app.debug) {
      $t.find('.date').append(' #' + thread.id)
    }
    return $t
  },
  
  parseKeyword: function(keyword){
    var t = this.keywordTemplate
                .replace(/{{keyword}}/g, keyword.keyword)
    return t
  },
  
  prependThread: function(thread){
    var $row = this.parse(thread)
    this.$el.prepend($row)
  },
  
  appendThreads: function(threads){
    if (threads.length) {
      threads[0].first = true
      threads[threads.length-1].last = true
      threads.forEach(this.appendThread.bind(this))
    }
  },

  appendThread: function(thread){
    thread.appended = true
    var $row = this.parse(thread)
    if (thread.first) $row.addClass('first')
    if (thread.last) $row.addClass('last')
    this.$el.append($row)
  },

  appendKeyword: function(keyword){
    var $row = $( this.parseKeyword(keyword) )
    this.$el.append($row)
  },

  appendWelcome: function(){
    this.$el.append(this.welcomeTemplate)
  },

  appendProfile: function(user){
    this.$el.append(this.profileTemplate.replace(/{{username}}/g, user.username))
  },

})