import Component from '@ember/component';
import { observer, get, set, getWithDefault } from '@ember/object';
import { later } from '@ember/runloop';

export default Component.extend({
  // Required:
  // value - the currently selected option
  // options - the available options,
  //           ['Canada', 'USA', 'Mexico']
  //           [{value: 'word-cloud', label: 'Word Cloud'}]

  // Optional:
  // disabled - boolean
  // required - boolean
  // multiple - boolean
  // name - string

  tagName: 'select',

  attributeBindings: [
    'disabled',
    'required',
    'multiple',
    'name'
  ],

  didReceiveAttrs() {
    set(this, 'noDefault', (get(this, 'value') && !get(this, 'keys')) ? false : true);
  },

  didInsertElement() {
    this.$().val(get(this, 'value') || '');
  },

  didRender() {
    this.$().val(get(this, 'value'));
    if (get(this, 'isUserRoles') && get(this, 'value') === '') {
      set(this, 'value', get(this, 'originalRole'));
    }
  },

  willDestroyElement() {
    if (get(this, 'isUserRoles')) {
      set(this, 'value', '');
    }
  },

  // For when value changes
  valueWatcher: observer('value', function() {
    let propValue = get(this, 'value');
    let elValue = this.$().val();
    if (elValue !== propValue) {
      this.$().val(propValue);
    }
  }),

  // For when element changes
  change() {
    let oldValue = get(this, 'value');
    let newValue = this.$().val();
    if (oldValue !== newValue) {
      set(this, 'value', newValue);
      if (get(this, 'changeAction')) {
        later(()=>get(this, 'changeAction')(), getWithDefault(this, 'changeDelay', 0));
      }
    }
  }

});