var ThreadSettingsForm = FormView.extend({
  
  el: "#thread_settings",
  
  events: {
    "click": "hide",
    "click .inner": "stopPropagation",
    "click .thread_delete": "deleteThread",
    "click .close_link": "hide",
    "change [name=color]": "changeColor",
  },
  
  action: "",
  method: 'put',
  
  initialize: function(){
    this.__super__.initialize.call(this)
    this.template = this.$(".template").html()
  },
  
  populate: function(){
    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.action = "/api/thread/" + thread.id

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

    this.$("[name=hootbox]").prop("checked", !!thread.settings.hootbox)
    this.$("[name=shorturls]").prop("checked", !!thread.settings.shorturls)
    this.$("[name=noupload]").prop("checked", !!thread.settings.noupload)
    
    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 ? 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))

    $("body").removeClass("loading")
  },
  
  validate: function(){
    var errors = []
    var title = $("[name=title]").val()
    if (! title || ! title.length) {
      errors.push("Please enter a title.")
    }
    return errors.length ? errors : null
  },

  serialize: function(){
    var data = {
      title: $("[name=title]").val(),
      keyword: $("[name=keyword]").val(),
      color: $("[name=color]").val(),
      settings: {
        hootbox: $("[name=hootbox]:checked").val() ? true : false,
        shorturls: $("[name=shorturls]:checked").val() ? true : false,
        noupload: $("[name=noupload]:checked").val() ? true : false,
      }
    }
    return JSON.stringify(data)
  },

  success: function(data){
    console.log(data)
    window.location.href = "/details/" + this.options.parent.data.thread.id
  },

  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()
  },
  
  changeColor: function(){
    var color_name = this.$("[name=color]").val()
    set_background_color(color_name)
  },

  deleteThread: function(e){
    var data = this.options.parent.data
    var id = data.thread.id
    var comment_count = (data.comments || []).length
    var file_count = (data.files || []).length
    var msg = "Are you sure you want to delete this thread?\n\n#" + id + ' "' + sanitize(data.thread.title) + '"'
    msg += " + " + comment_count + " comment" + courtesy_s(comment_count)
    if ( file_count) msg += " + " + file_count + " file" + courtesy_s(file_count)
    var should_remove = confirm(msg)
    if (should_remove) {
      $.ajax({
        method: "DELETE",
        url: "/api/thread/" + id,
        headers: { "csrf-token": $("[name=_csrf]").attr("value") },
        data: { csrf: csrf() },
        success: function(){
          window.location.href = "/"
        },
      })
    }
  },

})