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', 'desc'],

  buildBuffer(buffer) {
    buffer.push("<span class='header-contents'>");
    buffer.push(I18n.t(this.get('i18nKey')));

    if (this.get('field') === this.get('order')) {
      buffer.push(iconHTML(this.get('desc') ? 'chevron-down' : 'chevron-up'));
    }
    buffer.push("</span>");
  },

  click() {
    if (this.get('order') === this.field) {
      this.set('desc', this.get('desc') ? null : true);
    } else {
      this.setProperties({ order: this.field, desc: null });
    }
  }
}));