'use strict';
/* global evt */

window.MenuGroup = (function(win) {

  // Extend from the HTMLElement prototype
  var proto = evt(Object.create(HTMLElement.prototype));

  proto.createdCallback = function() {
    this.style.width = '0';
    this.classList.add('closed');
  };

  proto.calculateChildWidth = function() {
    var child = this.firstElementChild;
    var childWidth = 0;
    var style;
    while(child) {
      style = window.getComputedStyle(child);
      childWidth += child.offsetWidth + parseInt(style.marginLeft, 10) +
                                        parseInt(style.marginRight, 10);
      child = child.nextElementSibling;
    }
    return childWidth;
  };

  proto.fireEvent = function(event, detail) {
    var evtObject = new CustomEvent(event, {
                                      bubbles: false,
                                      detail: detail || this
                                    });
    this.dispatchEvent(evtObject);
    this.fire(event, detail);
  };

  proto.focus = proto.open = function() {
    this.getAnimations().forEach((animation) => {
      animation.cancel();
    });
    
    this.fireEvent('will-open');
    
    this.animateEnlarge()
    .then(this.animateShrink.bind(this), this.resetToClose.bind(this))
    .then(this.animateOpen.bind(this), this.resetToClose.bind(this))
    .then( () => {
      this.classList.remove('opening');
      this.fireEvent('opened');
    }, () => {
      this.resetToOpen();
      this.fireEvent('opened'); 
    });
  };

  proto.blur = proto.close = function() {
    this.getAnimations().forEach((animation) => {
      animation.cancel();
    });
    
    this.fireEvent('will-close');
    this.animateClose()
    .then( () => {
      this.classList.remove('closing');
      this.classList.add('closed');
      // final state: closed
      this.fireEvent('closed');
    }, () => {
      this.classList.remove('closing');
      this.classList.add('closed');
      // final state: closed
      this.fireEvent('closed');
    });
  };
  
  proto.animateEnlarge = function() {
    console.log('animateEnlarge');
    // If we get focus when we closing the group, we need to cancel the closing
    // state.
    this.classList.remove('shrinking');
    this.classList.remove('opening');
    this.classList.remove('closing');
    this.classList.add('enlarging');
    
    return this.getTransition('background-color').finished;
  };
  
  proto.animateShrink = function() {
    console.log('aniamteShrink');
    this.classList.remove('enlarging');
    this.classList.add('shrinking');
    
    return this.getTransition('background-color').finished;
  };
  
  proto.animateOpen = function() {
    console.log('animateOpen');
    this.classList.remove('shrinking');
    this.classList.remove('closed');
    this.classList.add('opening');
    // change to opening
    this.style.width = this.calculateChildWidth() + 'px';
    
    return this.getTransition('width').finished;
  };
  
  proto.animateClose = function() {
    console.log('animateClose');
    
    if (this.classList.contains('closed')) {
      var promise = new Promise((resolve, reject) => {
        setTimeout(() => {
          resolve();
        });
      });
      return promise;
    }
    // We may call close at mid state, we need to reset all of them and go to
    // closing state
    this.classList.remove('enlarging');
    this.classList.remove('shrinking');
    this.classList.remove('opening');
    this.classList.add('closing');
    this.style.width = '0';
    
    var transition = this.getTransition('width');
    return transition ? transition.finished : this.getTransition('background-color').finished;
  };
  
  proto.getTransition = function(attr) {
    var transition;
    this.getAnimations().forEach( (animation) => {
      if (animation.transitionProperty === attr) {
        transition = animation;
      }
    });
    
    return transition;
  };
    
  proto.resetToOpen = function() {
 /*   this.classList.remove('shrinking');
    this.classList.remove('closed');*/
    this.classList.remove('opening');
  };
  
  proto.resetToClose = function() {
    this.classList.remove('enlarging');
    this.classList.remove('shrinking');
    this.classList.remove('opening');
    this.classList.remove('closing');
    this.classList.add('closed');
  };

  // Register and return the constructor
  return document.registerElement('menu-group', { prototype: proto });
})(window);

/* End of Menu Group component */

// Handle button clicks to trigger menu group behaviors
window.onload = function() {
  
  window.openMenu = function () {
    document.getElementById('test-target').open();
  };
  window.closeMenu = function () {
    document.getElementById('test-target').close();
  };
  window.focusMenu = function () {
    document.getElementById('test-target').focus();
  };
  window.blurMenu = function () {
    document.getElementById('test-target').blur();
  };
  
  ['opened', 'closed', 'will-open', 'will-close'].forEach(function(evt) {
    document.getElementById('test-target').addEventListener(evt,
      function() {
        console.log(evt + ' received!');
      });
  });
};