var HootBox = FormView.extend({
  el: "#hootbox",

  events: {},

  action: "/api/thread/1/comment",

  initialize: function () {
    this.__super__.initialize.call(this);
    this.template = this.$(".template").html();
    this.$hoots = this.$("#hoots");
    this.$comment = this.$("[name=comment]");
  },

  show: function () {
    this.$el.show();
  },

  hide: function () {
    this.$el.hide();
  },

  load: function (comments) {
    if (!comments || (!comments.length && !this.options.required)) {
      this.$el.hide();
      return;
    }
    comments.forEach(this.appendComment.bind(this));
  },

  parse: function (comment) {
    console.log(comment);
    var t = this.template
      .replace(/{{image}}/g, profile_image(comment.username))
      .replace(/{{username}}/g, comment.username)
      .replace(/{{comment}}/g, tidy_urls(comment.comment, true));
    var $t = $(t);
    return $t;
  },

  prependComment: function (comment) {
    var $el = this.parse(comment);
    this.$hoots.prepend($el);
  },

  appendComment: function (comment) {
    var $el = this.parse(comment);
    this.$hoots.append($el);
  },

  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) {
    this.prependComment(data.comment);
    this.$("[name=comment]").val("");
  },
});