import Ember from 'ember';
import { computed } from '@ember/object';

export default Ember.Controller.extend({
  appName: 'Ember Twiddle',
  currentCity: undefined,
  cityToBeRemoved: undefined,
  cities: ['London', 'Rome', 'Los Angeles'],

  // it's important to listen on elements added or removed with cities.[]
  citiesFirstLetter: computed('cities.[]', function() {
    return this.cities.map((item) => {
      return item[0];
    });
  }),

  location: {
		streetName: 'Caledonian Road',
  	streetNumber: '233',
	},

  address: computed('location.{streetName,streetNumber}', function() {
    return `${this.location.streetNumber} ${this.location.streetName}`;
  }),

  actions: {
    addCity(name) {
      console.log(name);
      // it's important to use observable methods like pushObject instead of push otherwise the other properties will not recomputed
      this.cities.pushObject(name);
    },
    removeCity(name) {
      this.cities.removeObject(name);
    },
  	changeLocation() {
      this.set('location.streetName', 'Kings cross');
      // this.set('location.streetNumber', '000');
      // this.set('location', { streetName: 'Carnaby Street', streetNumber: 22 });
    }
  }
});