var FilesView = FormView.extend({
  el: "#files",

  events: {
    "click .file": "pick",
    "click #sortByName": "clickSortByName",
    "click #sortByDate": "clickSortByDate",
    "click #sortBySize": "clickSortBySize",
  },

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

  load: function (files, thread) {
    if (!files.length) {
      this.$el.hide();
    }
    var total = 0,
      has_music = false;

    this.files = files || this.files;
    this.thread = thread || this.thread;
    this.files.forEach(
      function (file) {
        if (is_image(file.filename)) {
          // return
        }
        total += file.size;
        has_music =
          has_music || file.filename.match(/(mp3|wav|ogg|opus|flac)$/i);
      }.bind(this)
    );

    this.total = total;
    this.has_music = has_music;

    if (this.has_music) {
      audio.init();
    }

    if (this.thread) {
      const sort = this.thread.settings.sort || "name_asc";
      this.resort(sort);
    }
  },

  add: function (files) {
    this.files = this.files.concat(files);
    this.resort(this.currentSort, this.reversed ? "desc" : "asc");
  },

  files: [],
  sortedFiles: [],
  currentSort: "name",
  reversed: false,
  resort: function (sort, reverse) {
    if (sort.indexOf("_")) {
      var s = sort.split("_");
      sort = s[0];
      reverse = s[1];
    }
    if (reverse === "asc" || !reverse) {
      this.reversed = false;
    } else {
      this.reversed = true;
    }
    switch (sort) {
      case "name":
        return this.sortByName();
      case "date":
        return this.sortByDate();
      case "size":
        return this.sortBySize();
    }
  },

  clickSortByName: function (e) {
    e && e.preventDefault();
    if (this.currentSort !== "name") {
      this.currentSort = "name";
      this.reversed = false;
    } else {
      this.reversed = !this.reversed;
    }
    this.sortByName();
    return this;
  },
  clickSortByDate: function (e) {
    e && e.preventDefault();
    if (this.currentSort !== "date") {
      this.currentSort = "date";
      this.reversed = true;
    } else {
      this.reversed = !this.reversed;
    }
    this.sortByDate();
    return this;
  },
  clickSortBySize: function (e) {
    e && e.preventDefault();
    if (this.currentSort !== "size") {
      this.currentSort = "size";
      this.reversed = true;
    } else {
      this.reversed = !this.reversed;
    }
    this.sortBySize();
    return this;
  },

  sortByName: function () {
    this.currentSort = "name";
    this.sort((a, b) => cmp(a.filename, b.filename));
  },
  sortByDate: function () {
    this.currentSort = "date";
    this.sort((a, b) => cmp(a.date, b.date));
  },
  sortBySize: function () {
    this.currentSort = "size";
    this.sort((a, b) => cmp(a.size, b.size));
  },

  sort: function (f) {
    this.$el.empty();
    this.sortedFiles = this.reversed
      ? this.files.sort(f).reverse()
      : this.files.sort(f);
    this.sortedFiles.forEach((file) => {
      this.appendFile(file);
    });
    this.appendTotal();
    if (this.has_music) {
      audio.index();
    }
  },

  parse: function (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.template
      .replace(/{{id}}/g, file.id)
      .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]);
    var $t = $(t);
    if (app.debug) {
      $t.find(".user").append(" #" + file.id);
    }
    return $t;
  },

  prependFile: function (file) {
    var $el = this.parse(file);
    this.$el.prepend($el);
  },

  appendFile: function (file) {
    var $el = this.parse(file);
    this.$el.append($el);
  },

  appendTotal: function () {
    var size = hush_size(this.total);
    var nameClass = this.sort === "name" ? "bold" : "";
    if (nameClass && this.reverse) {
      nameClass += " italic";
    }
    var dateClass = this.sort === "date" ? "bold" : "";
    if (dateClass && this.reverse) {
      dateClass += " italic";
    }
    var sizeClass = this.sort === "size" ? "bold" : "";
    if (sizeClass && this.reverse) {
      sizeClass += " italic";
    }
    var t = this.templateTotal
      .replace(/{{size_class}}/g, size[0])
      .replace(/{{size}}/g, size[1])
      .replace(/{{nameClass}}/g, nameClass)
      .replace(/{{dateClass}}/g, dateClass)
      .replace(/{{sizeClass}}/g, sizeClass);
    this.$el.append(t);
  },

  pick: function (e) {
    if (e.ctrlKey || e.altKey || e.metaKey || e.shiftKey) return;
    if (!e.target.href || !e.target.href.match(/(mp3|wav|ogg|opus|flac)$/i))
      return;
    e.preventDefault();
    audio.play(e.target.dataset.index); // index set in audio.js
  },
});

var FILE_SORTS = [
  { key: "name_asc", label: "Name, a-z" },
  { key: "name_desc", label: "Name, z-a" },
  { key: "date_asc", label: "Date, oldest" },
  { key: "date_desc", label: "Date, newest" },
  { key: "size_asc", label: "Size, smallest" },
  { key: "size_desc", label: "Size, largest" },
];