var SelectInput = function(el, params) {

  if (!el) {
    return;
  }

  this._setParams(this.defaults, true);
  this._cacheElements(el);
  this._setParams(params || {});
  this._bindEventListenerCallbacks();
  this._addEventListeners();
};

SelectInput.prototype = {

_setParams: Base.setParams,
_toggleClass: Base.toggleClass,
remove: Base.remove,

_whitelistedParams: ['onChange', 'onFocus', 'onBlur'],

defaults: {
  el: null,
  selectEl: null,
  labelEl: null,
  hasValue: false,
  isActive: false,
  onChange: null,
  onFocus: null,
  onBlur: null,
  previousValue: null,
  _onFocusBound: null,
  _onBlurBound: null,
  _onInputBound: null
},

getValue: function() {
  return this.selectEl.value;
},

setValue: function(val) {

  // Cast to a string for comparison
  val = val + '';

  var i = 0;
  var len = this.selectEl.children.length;

  for (; i < len; i++) {
    if (this.selectEl.children[i].value === val) {
      this.selectEl.children[i].selected = true;
      this._updateClass();
      return;
    }
  }
},

setOptions: function(opts) {

  var i = 0;
  var len = opts.length;
  var str = '';

  // Store the index of the currently selected option so we can set
  // it when we're all done.
  var curIndex = this.selectEl.selectedIndex;

  for (; i < len; i++) {
    str += '<option ' + (opts[i].value !== undefined ? 'value="' + (opts[i].value || '') + '"' : '') + '>' + (opts[i].text || '') + '</option>';
  }

  this.selectEl.innerHTML = str;
  this.selectEl.selectedIndex = Math.min(len - 1, curIndex);
},

setLabel: function(text) {
  if (!this.labelEl) return;
  this.labelEl.innerHTML = text;
},

_cacheElements: function(el) {

  this.el = el;
  this.selectEl = this.el.querySelector('select');
  this.labelEl = this.el.querySelector('.spark-label');

  if (!this.selectEl) {
    throw new Error('A <select> element must be present!', this.el);
  }

  this._updateClass();
},

_bindEventListenerCallbacks: function() {
  this._onFocusBound = this._onFocus.bind(this);
  this._onBlurBound = this._onBlur.bind(this);
  this._onInputBound = this._onInput.bind(this);
},

_addEventListeners: function() {
  this.selectEl.addEventListener('focus', this._onFocusBound);
  this.selectEl.addEventListener('blur', this._onBlurBound);
  this.selectEl.addEventListener('input', this._onInputBound);
},

_removeEventListeners: function() {
  this.selectEl.removeEventListener('focus', this._onFocusBound);
  this.selectEl.removeEventListener('blur', this._onBlurBound);
  this.selectEl.removeEventListener('input', this._onInputBound);
},

_updateClass: function() {
  this.hasValue = this.selectEl.value ? true : false;
  this._toggleClass(this.el, 'has-value', this.hasValue);
  this._toggleClass(this.el, 'active', this.isActive);
},

_onFocus: function() {
  this.isActive = true;
  this._updateClass();
  var value = this.getValue();
  (this.onFocus || noop)(value);
},

_onBlur: function() {
  this.isActive = false;
  this._updateClass();
  var value = this.getValue();
  (this.onBlur || noop)(value);
},

_onInput: function() {

  this._updateClass();

  var value = this.getValue();

  if (value !== this.previousValue) {
    this.previousValue = value;
    (this.onChange || noop)(value);
  }
}
  };

  Base.exportjQuery(SelectInput, 'SelectInput');

  return SelectInput;
}));