import Ember from 'ember';

const {
  Component,
  computed
} = Ember;

export default Component.extend({
  classNameBindings: ['isActive', ':pill-meta'],

  isActive: false,
  options: [
    { displayName: "A", flags: -2147482621, format: "Text", formattedName: "a(A)", metaName: "a" },
    { displayName: "B", flags: -2147482621, format: "Text", formattedName: "b(B)", metaName: "a" },
    { displayName: "C", flags: -2147482621, format: "Text", formattedName: "c(C)", metaName: "a" },
    { displayName: "D", flags: -2147482621, format: "Text", formattedName: "d(D)", metaName: "a" },
  ],
  selection: null,
  sendMessage: () => {},

  actions: {
    onChange(selection /* powerSelectAPI, event */) {
      this._broadcast('META_SELECTED', selection);
    },
    onFocus(powerSelectAPI /* event */) {
      if (powerSelectAPI.lastSearchedText) {
        powerSelectAPI.actions.search('');
      }
      powerSelectAPI.actions.open();
    }
  },

  _broadcast(type, data) {
    this.get('sendMessage')(type, data);
  },

  _isActive: computed('isActive', 'options', function() {
    const isActive = this.get('isActive');
    const options = this.get('options');
    return isActive && options.length > 0;
  }),

  _matcher: (m, input) => {
    const _input = input.toLowerCase();
    const _metaName = m.metaName.toLowerCase();
    const _displayName = m.displayName.toLowerCase();
    return _metaName.indexOf(_input) & _displayName.indexOf(_input);
  }
});