import { on, observes, default as computed } from 'ember-addons/ember-computed-decorators';
import { findRawTemplate } from 'discourse/lib/raw-templates';

export default Ember.Component.extend({
  @computed('placeholderKey')
  placeholder(placeholderKey) {
    return placeholderKey ? I18n.t(placeholderKey) : '';
  },

  @observes('badgeNames')
  _update() {
    if (this.get('canReceiveUpdates') === 'true')
      this._initializeAutocomplete({updateData: true});
  },

  @on('didInsertElement')
  _initializeAutocomplete(opts) {
    var self = this;
    var selectedBadges;

    self.$('input').autocomplete({
      allowAny: false,
      items: _.isArray(this.get('badgeNames')) ? this.get('badgeNames') : [this.get('badgeNames')],
      single: this.get('single'),
      updateData: (opts && opts.updateData) ? opts.updateData : false,
      onChangeItems: function(items){
        selectedBadges = items;
        self.set("badgeNames", items.join(","));
      },
      transformComplete: function(g) {
        return g.name;
      },
      dataSource: function(term) {
        return self.get("badgeFinder")(term).then(function(badges){

          if(!selectedBadges){
            return badges;
          }

          return badges.filter(function(badge){
            return !selectedBadges.any(function(s){return s === badge.name;});
          });
        });
      },
      template: findRawTemplate('badge-selector-autocomplete')
    });
  }
});