import Component from '@ember/component';
import { observer, get } from '@ember/object';

export default Component.extend({
  classNames: ['nacho-select'],

  init() {
    this._super(...arguments);
    this.updateContent();
  },

  onSelectionChanged: observer('selected', 'values', function() {
    this.updateContent();
  }),

  /**
   * Parse and transform the values list into a list of objects with the currently
   * selected option flagged as `isSelected`
   */
  updateContent() {
    const selected = this.get('selected') || null;

    const options = this.get('values') || [];
    const content = options.map(option => {
      if (typeof option === 'object' && typeof option.value !== 'undefined') {
        const isSelected = option.value === selected;
        return { value: option.value, label: option.label, isSelected, isDisabled: option.isDisabled || false };
      }

      return { value: option, isSelected: option === selected };
    });

    this.set('content', content);
  },

  actions: {
    // Reflect UI changes in the component and bubble the `selectionDidChange` action
    change() {
      const { selectedIndex } = this.$('select')[0];
      const values = this.get('values');
      const _selected = values[selectedIndex];
      const selected = typeof _selected.value !== 'undefined' ? _selected.value : _selected;

      this.set('selected', selected);

      get(this, 'selectionDidChange')(_selected);
    }
  }
});