import Ember from 'ember';

export default Ember.Controller.extend({
  appName: 'Ember Twiddle',
  selectedLanguages: [],
  queryParams: ['selectedLanguages'],

  init() {
    this._super(...arguments);
  },

  languages: [
    {
   		code: 'en',
      name: 'English'
    },
    {
   		code: 'es',
      name: 'Spanish'
    },
    {
   		code: 'fr',
      name: 'French'
    },
    {
   		code: 'de',
      name: 'German'
    },
  ],

  languagesWithSelected: Ember.computed('selectedLanguages.[]', 'languages.@each.code', {
    get() {
      return this.get('languages').map(({code, name}) => ({
        code,
        name,
        checked: this.get('selectedLanguages').includes(code),
      }));
    }
  }),

  actions: {
    toggleLanguage(language) {
      const selectedLanguages = this.get('selectedLanguages');
      const {code} = language;

      if(selectedLanguages.includes(code)) {
        selectedLanguages.removeObject(code);
      } else {
        this.get('selectedLanguages').pushObject(code);
      }
    }
  }
});