var ThreadSettingsForm = FormView.extend({
  
  el: "#thread_settings",
  
  events: {
    "click": "hide",
    "click .inner": "stopPropagation",
    "click .close_link": "hide"
  },
  
  action: "",
  method: 'put',
  
  initialize: function(){
    this.__super__.initialize.call(this)
    this.template = this.$(".template").html()
  },
  
  populate: function(){
    // this.action = "/api/thread/" + data.id
    $("body").removeClass("loading")
    
    var data = this.options.parent.data
    var keywords = data.keywords
    var keyword = data.keyword
    var thread = data.thread
    var comments = data.comments
    var files = data.files
    var settings = thread.settings
    var display = thread.display

    this.$(".close_link").attr("href", "/details/" + thread.id)
    this.$(".metadata").html(metadata(thread))
    this.$("[name=title]").val(sanitize(thread.title))

    var $color = this.$('[name=color]')
    Object.keys(COLORS).forEach((color) => {
      var option = document.createElement('option')
      option.value = color
      option.innerHTML = color
      $color.append(option)
    })
    $color.val(thread.color || keyword.color)
    
    $.get('/api/keywords', function(data){
      var $keyword = this.$('[name=keyword]')
      data.keywords
      .map( (a) => a.keyword)
      .sort( (a,b) => a < b ? -1 : a === b ? 0 : 1 )
      .forEach((keyword) => {
        var option = document.createElement('option')
        option.value = keyword
        option.innerHTML = keyword
        $keyword.append(option)
      })
      $keyword.val(thread.keyword)
    }.bind(this))
    console.log(thread)
  },
  
  validate: function(){
    var errors = []
    var comment = $("[name=comment]").val()
    if (! comment || ! comment.length) {
      errors.push("Please enter a comment.")
    }
    return errors.length ? errors : null
  },

  success: function(data){
    window.location.href = "/details/" + data.comment.thread
  },

  visible: false,
  
  show: function(){
    this.visible = true
    this.populate()
    this.$el.addClass('visible')
    app.router.pushState("/details/" + this.options.parent.data.thread.id + "/settings")
  },

  hide: function(e){
    e && e.preventDefault()
    this.visible = false
    this.$el.removeClass('visible')
    app.router.pushState("/details/" + this.options.parent.data.thread.id)
  },

  toggle: function(){
    if (this.visible) this.hide()
    else this.show()
  },

})