var ThreadSettingsForm = FormView.extend({
  
  el: "#thread_settings",
  
  events: {
    "click": "hide",
    "click .inner": "stopPropagation",
    "click .thread_delete": "deleteThread",
    "click .file_delete": "deleteFile",
    "click .close_link": "hide",
    "change [name=color]": "changeColor",
    "change [name=privacy]": "toggleAllowed",
    "click #allowed_names [type=checkbox]": "removeAllowed",
    "keydown [name=allowed_field]": "keydownAllowed",
    "blur [name=allowed_field]": "updateAllowed",
  },
  
  action: "",
  method: 'put',
  
  initialize: function(){
    this.__super__.initialize.call(this)
    this.template = this.$(".template").html()
    this.allowedTemplate = this.$(".allowedTemplate").html()
    this.filesTemplate = this.$(".settingsFilesTemplate").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.thread = thread
    this.files = data.files
    this.action = "/api/thread/" + thread.id
    this.allowed = (this.thread.allowed || "").split(" ").map(s => s.trim()).filter(s => !! s)

    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)
    this.$("[name=privacy]").prop("checked", !!thread.privacy)
    
    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 && thread.color? thread.color: keyword? keyword.color: "")
    
    this.toggleAllowed()
    this.fetchKeywords()
    
    var $files = this.$(".files")
    $files.empty()
    files.sort((a,b) => cmp(a.filename, b.filename))
    .forEach(file => {
      var size = hush_size(file.size)
      var datetime = verbose_date(file.date, true)
      var date_class = carbon_date(file.date)
      var link = make_link(file)
      var t = this.filesTemplate.replace(/{{username}}/g, file.username)
                           .replace(/{{link}}/g, link)
                           .replace(/{{filename}}/g, file.filename)
                           .replace(/{{date_class}}/g, date_class)
                           .replace(/{{date}}/g, datetime[0])
                           .replace(/{{time}}/g, datetime[1])
                           .replace(/{{size_class}}/g, size[0])
                           .replace(/{{size}}/g, size[1])
                           .replace(/{{id}}/g, file.id)
      var $t = $(t)
      $files.append($t)
    })

    $("body").removeClass("loading")
  },
  
  fetchKeywords: function(thread){
    $.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(this.thread.keyword)
    }.bind(this))
  },
  
  toggleAllowed: function(e){
    var checked = this.$('[name=privacy]').prop('checked')
    this.$(".allowed_field_container").toggle(checked)
    this.$(".allowed_names").toggle(checked)
    if (! checked) return
    this.$("[name=allowed_field]").focus()
    this.displayAllowed()
  },
  
  displayAllowed: function(e){
    var $allowedNames = this.$(".allowed_names").empty()
    this.allowed.forEach(username => {
      var t = this.allowedTemplate.replace(/{{username}}/g, username)
      $allowedNames.append(t)
    })
  },
  
  keydownAllowed: function(e){
    if (e.keyCode === 13) { // enter
      e.preventDefault()
      e.stopPropagation()
      this.updateAllowed()
    }
  },
  
  updateAllowed: function(){
    var usernames = this.$('[name=allowed_field]').val().replace(/,/g, ' ').split(' ').map(s => s.trim()).filter(s => !! s)
    this.$('[name=allowed_field]').val('')
    usernames = usernames.filter( (name) => this.allowed.indexOf(name) === -1 )
      .map( (name) => sanitize(name) )
    $.ajax({
      method: "PUT",
      url: "/api/checkUsernames",
      headers: { "csrf-token": $("[name=_csrf]").attr("value") },
      data: JSON.stringify({ csrf: csrf(), usernames: usernames }),
      contentType: "application/json",
      dataType: "json",
      success: function(data){
        if (! data.usernames || ! data.usernames.length) return
        this.allowed = this.allowed.concat(data.usernames)
        this.displayAllowed()
      }.bind(this),
    })
  },
  
  removeAllowed: function(){
    this.allowed = this.$("#allowed_names input[type=checkbox]:checked").map(function(){
      return $(this).val()
    })
    this.displayAllowed()
  },
  
  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(),
      privacy: $("[name=privacy]:checked").val() ? 1 : 0,
      allowed: this.allowed.join(","),
      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
    app.typing = 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
    app.typing = 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: JSON.stringify({ csrf: csrf() }),
        dataType: "application/json",
        success: function(){
          window.location.href = "/"
        },
      })
    }
  },

  deleteFile: function(e){
    e.preventDefault()
    e.stopPropagation()
    var $el = $(e.currentTarget)
    var $parent = $el.closest('.file')
    var file_id = $el.data('id')
    if (! file_id) return
    var data = this.options.parent.data
    var file = data.files.find(f => f.id === file_id)
    if (! file) return
    var msg = "Are you sure you want to delete this file?\n\n#" + file_id + ' "' + sanitize(file.filename) + '"'
    var should_remove = confirm(msg)
    if (should_remove) {
      $.ajax({
        method: "DELETE",
        url: "/api/file/" + file_id,
        headers: { "csrf-token": $("[name=_csrf]").attr("value") },
        data: JSON.stringify({ csrf: csrf() }),
        dataType: "application/json",
        success: function(data){
          console.log(data)
          $parent.remove()
        },
        error: function(data){
          $parent.remove()
        },
      })
    }
  },

})