component.js

import Ember from 'ember';
import DropdownNavigationMixin from 'salonized/mixins/dropdown-navigation';

const { Component, computed } = Ember;

export default Component.extend(DropdownNavigationMixin, {
  classNames: ['sz-select', 'dropdown'],
  classNameBindings: ['withAvatar:sz-select-avatar'],
  attributeBindings: ['data-name'],
  items: null,
  itemLabel: '.',
  itemValue: '.',

  prompt: computed(function() {
    return this.get('i18n').t('components.sz-select.default_prompt');
  }),
  activeItem: computed('items', 'value', function() {
    if (this.get('itemValue') === '.' && this.get('value.content')) {
      return this.get('value.content');
    } else {
      let active = this.get('items').findBy(this.get('itemValue'), this.get('value'));
      return active ? active : this.get('value');
    }
  }),
  activeItemLabel: computed('activeItem', function() {
    if (this.get('activeItem')) {
      if (Ember.typeOf(this.get('activeItem')) === 'instance') {
        return this.get('activeItem').get(this.get('itemLabel'));
      } else {
        return this.get('activeItem');
      }
    }
  }),
  mappedItems: computed('activeItem', 'items.@each', 'itemLabel', 'itemValue', function() {
    let label, value, active;

    return this.get('items').map((option) => {
      if (Ember.typeOf(option) === 'string') {
        label = option;
        value = option;
      } else {
        label = option.get(this.get('itemLabel'));
        value = option.get(this.get('itemValue'));
      }
      active = this.get('activeItem') === option;

      return Ember.Object.create({ option: option, label: label, value: value, active: active });
    });
  }),
}