import { iconHTML } from "discourse-common/lib/icon-library";
import { bufferedRender } from "discourse-common/lib/buffered-render";

export default Ember.Component.extend(
  bufferedRender({
    tagName: "th",
    classNames: ["sortable"],
    rerenderTriggers: ["order", "ascending"],

    buildBuffer(buffer) {
      const icon = this.get("icon");

      if (icon) {
        buffer.push(iconHTML(icon));
      }

      buffer.push(I18n.t(this.get("i18nKey")));

      if (this.get("field") === this.get("order")) {
        buffer.push(
          iconHTML(this.get("ascending") ? "chevron-up" : "chevron-down")
        );
      }
    },

    click() {
      const currentOrder = this.get("order");
      const field = this.get("field");

      if (currentOrder === field) {
        this.set("ascending", this.get("ascending") ? null : true);
      } else {
        this.setProperties({ order: field, ascending: null });
      }
    }
  })
);