var CommentsView = FormView.extend({
  
  el: "#comments",
  
  events: {
    "focus textarea": "focus",
    "blur textarea": "blur",
    "click .remove": "remove",
  },
  
  initialize: function(){
    this.__super__.initialize.call(this)
    this.template = this.$(".template").html()
    this.$formRow = this.$("#comment_form")
  },
  
  load: function(comments, thread) {
    // console.log(comments)
    thread = this.thread = thread || this.thread
    if (thread.settings.hootbox) {
      comments
        .sort((a,b) => cmp(a.date, b.date))
        .forEach(this.prependComment.bind(this))
      this.$el.prepend(this.$formRow)
    }
    else if (thread.id < 4125) {
      comments
        .sort((a,b) => cmp(a.date, b.date))
        .forEach(this.appendComment.bind(this))
    }
    else {
      comments
        .sort((a,b) => cmp(a.id, b.id))
        .forEach(this.appendComment.bind(this))
    }
  },
  
  parse: function(comment) {
    if (! comment.comment.length) return $('')
    var datetime = verbose_date(comment.date, true)
    var t = this.template.replace(/{{image}}/g, profile_image(comment.username))
                         .replace(/{{username}}/g, comment.username)
                         .replace(/{{id}}/g, comment.id)
                         .replace(/{{comment}}/g, function(){ return tidy_urls(comment.comment) })
                         .replace(/{{date}}/g, datetime[0])
                         .replace(/{{time}}/g, datetime[1])
    var $t = $(t)
    if (auth.user.username !== comment.username) {
      $t.find(".edit-links").remove()
    }
    if (app.debug) {
      $t.find('.date').prepend('#' + comment.id + ' ')
    }
    return $t
  },
  
  prependComment: function(comment){
    var $el = this.parse(comment)
    this.$el.prepend($el)
  },

  appendComment: function(comment){
    var $el = this.parse(comment)
    $el.insertBefore(this.$formRow)
  },

  removeComment: function(id) {
    this.$("[title='" + id + "']").closest('tr').remove()
  },
  
  success: function(){
    this.prependComment(comment)
  },
  
  focus: function(){
    app.typing = true
  },
  
  blur: function(){
    app.typing = false
  },
  
  remove: function(e){
    var id = $(e.target).data('id')
    var should_remove = confirm("Are you sure you want to delete this comment? #" + id)
    if (should_remove) {
      $.ajax({
        method: "DELETE",
        url: "/api/comment/" + id,
        headers: { "csrf-token": $("[name=_csrf]").attr("value") },
        data: { csrf: csrf() },
        success: () => {
          this.removeComment(id)
          // window.location.reload()
        },
      })
    }
  },

})