var Events = {
  ANIMATION_END: 'webkitAnimationEnd',
  TRANSITION_END: 'webkitTransitionEnd'
};

module.exports = {

  play: function(component, animation) {
    return new Promise(function(resolve, reject) {

      var el = component.getDOMNode();

      el.addEventListener(Events.ANIMATION_END, onAnimEnd, false);
      el.style.webkitAnimation = animation;

      function onAnimEnd(evt) {
        el.style.webkitAnimation = '';
        el.removeEventListener(Events.ANIMATION_END, onAnimEnd);
        return resolve(el);
      }

    });
  },

  transition: function(component, style, time, easing) {
    return new Promise(function(resolve, reject) {

      console.log('transition start', style, time);

      time = time || '500ms';
      easing = easing || 'linear';

      var props = Object.keys(style);
      var el = component.getDOMNode();

      el.style.transition = null;

      el.addEventListener(Events.TRANSITION_END, onTransitionEnd, false);

      props.forEach(function(styleProp) {
        el.style[styleProp] = style[styleProp].start;
      });

      var transition = '';
      props.forEach(function(styleProp) {
        if(transition) transition += ', ';
        transition += styleProp + ' ' + time + ' ' + easing;
      });
      el.style.transition = transition;

      props.forEach(function(styleProp) {
        el.style[styleProp] = style[styleProp].end;
      });

      function onTransitionEnd(evt) {
        console.log('transition end', evt);
        el.style.transition = null;
        el.removeEventListener(Events.TRANSITION_END, onTransitionEnd);
        return resolve(el);
      }

    });
  }

};