var MailboxView = View.extend({
  el: "#messages",

  events: {
    "click .discard_link": "discard",
  },

  action: "/api/mailbox/",

  initialize: function () {
    this.__super__.initialize.call(this);
    this.template = this.$(".template").html();
    this.boxlist = new BoxList();
    this.message = new MessageView();
  },

  load: function (name) {
    name = sanitizeHTML(name) || "inbox";
    $("h1").html(name);
    var query = window.location.search.substr(1);
    $.get(this.action + name, query, this.populate.bind(this));
  },

  populate: function (data) {
    if (data.boxes) {
      this.boxlist.load(data.boxes);

      var user = data.user;
      var max = data.messages.length - 1;
      if (data.messages.length) {
        var limit = data.query.limit || 50;
        var offset = data.query.offset + data.messages.length;
        if (limit > data.messages.length) {
          $(".next_page").hide();
        } else {
          var query = { limit, offset };
          $(".next_page a").attr("href", "?" + querystring(query));
        }
      } else {
        $("#no_messages").show();
        $(".next_page").hide();
      }
      data.messages.forEach(
        function (message, i) {
          var $row = this.parse(message, user);
          if (i === 0) $row.addClass("first");
          if (i === max) $row.addClass("last");
          this.$el.append($row);
        }.bind(this),
      );
    }
    $("body").removeClass("loading");
  },

  parse: function (message, user) {
    var datetime = verbose_date(message.date);
    var size = hush_size(message.size);
    var id = message.id;

    var is_sender = message.sender === user.username;
    var t = this.template
      .replace(/{{id}}/g, message.id)
      .replace(/{{to}}/g, is_sender ? "to " : "")
      .replace(/{{unread}}/g, message.unread ? "unread" : "")
      .replace(/{{username}}/g, is_sender ? message.recipient : message.sender)
      .replace(/{{subject}}/g, message.subject)
      .replace(/{{date}}/g, datetime[0])
      .replace(/{{time}}/g, datetime[1])
      .replace(/{{date_class}}/g, carbon_date(message.lastmodified))
      .replace(/{{size}}/g, size[1])
      .replace(/{{size_class}}/g, size[0]);
    var $t = $(t);
    if (is_sender) {
      $t.find(".reply_link").remove();
    }
    return $t;
  },

  discard: function (e) {
    var id = $(e.target).data("id");
    var ok = confirm("Really delete this message?");
    if (!ok) return;
    $.ajax({
      method: "delete",
      url: "/api/message/" + id,
      headers: { "csrf-token": csrf() },
      data: { _csrf: csrf() },
      success: function () {
        window.location.reload();
      },
      error: function () {
        window.location.reload();
      },
    });
  },
});