import Ember from 'ember';

const {
  Component,
  get,
  set,
  computed: { filter }
} = Ember;

export default Component.extend({

  classNames: ['multi-select'],

  _optionFilter: '',
  _selectedOptionFilter: '',
  _selectedOptions: [],

	_options: filter('options', function(option) {

		return ! get(this, '_selectedOptions').contains(option);

 	}).property('options.[]','_selectedOptions.[]'),

  _filteredOptions: filter('_options', function(option) {
    const filter = get(this, '_optionFilter');
    const regex  = new RegExp(filter, 'gi');

    return get(option, 'name').match(regex);

  }).property('_optionFilter', '_options.[]'),

  _filteredSelectedOptions: filter('_selectedOptions', function(option) {
    const filter = get(this, '_selectedOptionFilter');
    const regex  = new RegExp(filter, 'gi');

    return get(option, 'name').match(regex);

  }).property('_selectedOptionFilter', '_selectedOptions.[]'),

  actions: {
    selectOption(option) {
      get(this, '_selectedOptions').addObject(option);
    },
    deselectOption(option) {
      get(this, '_selectedOptions').removeObject(option);
    }
  }

});