import Ember from 'ember';
// import fade from 'ember-animated/transitions/fade';
import move from 'ember-animated/motions/move';
import { fadeIn, fadeOut } from 'ember-animated/motions/opacity';
import { easeIn, easeOut, easeInAndOut } from 'ember-animated/easings/cosine';

export default Ember.Controller.extend({
  appName: 'Ember Twiddle',

  isThingActive: false,

  showThingActions: true,

  duration: 1000,

  actions: {
  	activate() {
    	this.toggleProperty('isThingActive');
    }
  },

//   *transition({ insertedSprites, removedSprites }) {
// 		console.log(arguments[0]);

//   	for (let sprite of insertedSprites) {
//     	move(sprite);
//     }
// 	},

  // iconTransition: fade
	*iconTransition({ insertedSprites, keptSprites, removedSprites }) {
		console.log(arguments[0]);
  	for (let sprite of insertedSprites.concat(keptSprites)) {
      console.log(sprite.initialBounds);
      sprite.startTranslatedBy(50, 0);
      console.log(sprite.initialBounds);
    	move(sprite, { easeInAndOut });
  		fadeIn(sprite);
    }

  	for (let sprite of removedSprites) {
      console.log(sprite.finalBounds);
      sprite.endTranslatedBy(50, 0);
      console.log(sprite.finalBounds);

    	move(sprite, { easeInAndOut });
  		fadeOut(sprite);
    }
	}
});