var ThreadForm = FormView.extend({

  el: "#thread_form",

  events: {
    "keydown textarea": "keydown",
  },

  action: "/api/thread",
  method: "POST",

  initialize: function(){
    this.__super__.initialize.call(this)
    this.template = this.$(".template").html()
  },

  load: function(selected_keyword){
    $.get("/api/keywords", function(data){
      var tags = {}
      data.keywords.forEach(keyword => {
        var kw = keyword.keyword
        var opt = document.createElement('option')
        opt.value = kw
        opt.innerHTML = kw
        tags[kw] = opt
      })
      var sorted = Object.keys(tags).sort().map(kw => tags[kw])
      this.$('[name=keyword]').append(sorted)
      if (selected_keyword) {
        this.$('[name=keyword]').val(selected_keyword)
      } else {
        this.$('[name=keyword]').val('unsorted')
      }
      $("body").removeClass('loading')
    }.bind(this))
  },

  keydown: function(e){
    if (((e.ctrlKey || e.metaKey || e.altKey) && e.keyCode == 83) || (e.ctrlKey && e.keyCode == 13)) { // "s" key or "ctrl + enter" 
      e.preventDefault()
      e.stopPropagation()
      this.save()
    }
  },

  validate: function(){
    var errors = []
    var title = this.$("[name=title]").val()
    if (! title || ! title.length) {
      errors.push("Please title your post.")
    }
    var comment = this.$("[name=comment]").val()
    var files = this.$("[name=files]").val()
    if ((! comment || ! comment.length) && ! files) {
      errors.push("Please enter a comment or add some files.")
    }
    return errors.length ? errors : null
  },

  success: function(data){
    if (data.error) {
      return alert(data.error)
    }
    window.location.href = "/details/" + data.id
  }
})