import { propertyEqual } from 'discourse/lib/computed';

export default Em.Component.extend({
  tagName: 'li',
  classNameBindings: ['active', 'tabClassName'],

  tabClassName: function() {
    return 'edit-category-' + this.get('tab');
  }.property('tab'),

  active: propertyEqual('selectedTab', 'tab'),

  title: function() {
    return I18n.t('category.' + this.get('tab').replace('-', '_'));
  }.property('tab'),

  didInsertElement() {
    this._super();
    Ember.run.scheduleOnce('afterRender', this, this._addToCollection);
  },

  _addToCollection: function() {
    this.get('panels').addObject(this.get('tabClassName'));
  },

  _resetModalScrollState() {
    const $modalBody = this.$().parents("#discourse-modal").find(".modal-body");
    if ($modalBody.length === 1) {
      $modalBody.scrollTop(0);
    }
  },

  actions: {
    select: function() {
      this.set('selectedTab', this.get('tab'));
      this._resetModalScrollState();
    }
  }
});