import { iconHTML } from 'discourse-common/lib/icon-library';
import { bufferedRender } from 'discourse-common/lib/buffered-render';
import computed from 'ember-addons/ember-computed-decorators';

export default Ember.Component.extend(bufferedRender({
  tagName: 'th',
  classNames: ['sortable'],
  attributeBindings: ['title'],
  rerenderTriggers: ['order', 'asc'],
  labelKey: null,

  @computed("field", "labelKey")
  title(field, labelKey) {
    if (!labelKey) {
      labelKey = `directory.${this.get('field')}`;
    }

    return I18n.t(labelKey + '_long', { defaultValue: I18n.t(labelKey) });
  },

  buildBuffer(buffer) {
    const icon = this.get('icon');
    if (icon) {
      buffer.push(iconHTML(icon));
    }

    const field = this.get('field');
    buffer.push(I18n.t(this.get('labelKey') || `directory.${field}`));

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

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

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