/* global Breadcrumb, DefaultItemView */
var AnimatedFolder = Namespace.declare("com.twitter.Bootstrap",
  class AnimatedFolder extends UcpComponent {
    static get implements() {
      return [];
    }

    static start() {
      UcpComponentSupport.importLink(this.IOR.loader.basePath + "/src/css/AnimatedFolder.css", "stylesheet", "text/css");
    }

    static get dependencies() {
      return [
        "/EAMD.ucp/Components/com/twitter/Bootstrap/3.3.7/Bootstrap.component.xml",
        "/EAMD.ucp/Components/com/twitter/Bootstrap/Breadcrumb/3.3.7/Breadcrumb.component.xml",
      ];
    }

    constructor() {
      super();
      this.name = "AnimatedFolder";
      this.transitionEnd = this.transitionEnd.bind(this);
      this.handleSelection = this.handleSelection.bind(this);
      this.getHistory = this.getHistory.bind(this);
      this.add = this.add.bind(this);
      this.history = [];
    }

    init() {
      if (this._private.isInitialized) {
        return;
      }
      super.init();
      this._private.isInitialized = false;
      this.direction = 1;
      return this;
    }

    handleSelection(event, object) {
      console.log(`handeSelection(${object}`);
      let ucpComponent;
      if(object instanceof ItemView){
        ucpComponent = object.ucpComponent; //forward
      } else {
        ucpComponent = object; //backward
        let index = -1;
        for(let cc = 0; cc < this.history.length; cc++) {
          if(this.history[cc] === object) {
            index = cc;
          }
          if(index >=0) {
            this.history[cc].inHistory = false;
          }
        }
        if(index >=0) {
          this.history = this.history.slice(0, index);
        }
      }
      this.add(ucpComponent);
    }

    add(object) {
      console.log('add new element');
      if (!object) {
        return;
      }
      Array.from(this.container.children).forEach(child => {
        child.classList.add('animation');
        child.classList.add('animatedFolderPre');
        child.style.transform = `translate(${-1 * this.direction * this.container.offsetWidth}px)`;
      });

      const view = object.overView;
      object.handleSelection = this.handleSelection;

      if (!object.inHistory) {
        this.history.push(object);
      }
      object.inHistory = true;

      view.append(this.container);
      const element = view.documentElement;
      element.addEventListener('transitionend', this.transitionEnd, false);

      element.style.zIndex = 999;
      element.classList.add('animation');
      if (this.direction === -1) {
        element.classList.add('animatedFolderNewReverse');
      } else {
        element.classList.add('animatedFolderNew');
      }
      element.style.transform = `translate(${-1 * this.direction * this.container.offsetWidth}px)`;

      object.aClass = 'active';

    }

    getHistory() {
      return this.history.slice(0).reverse();
    }

    transitionEnd(event) {
      event.preventDefault();
      event.stopPropagation();
      this.breadcrumb.defaultView.update();

      const {srcElement} = event;

      srcElement.removeEventListener('transitionend', this.transitionEnd);
      if(window.stopTransaction) {
        return;
      }
      Array.from(this.defaultView.documentElement.querySelectorAll('.animatedFolderPre')).forEach(child => {
        child.remove();
      });


      srcElement.classList.remove('animatedFolderNew');
      srcElement.classList.remove('animatedFolderNewReverse');

      srcElement.style.transform = "";
      srcElement.style.zIndex = "";
      srcElement.classList.remove('animation');

      this.direction = 1;
    }

    get container() {
      return (this.defaultView.documentElement) ? this.defaultView.documentElement.querySelector(`#${this.defaultView.id}-container`) : null;
    }

    get breadcrumb() {
      const [bc] = this.defaultView.children.filter(child => child.ucpComponent instanceof Breadcrumb);
      return bc.ucpComponent;
    }

    onDomReady() {
      if (!this.defaultView || this._private.isInitialized) {
        return;
      }
      const bc = this.breadcrumb;
      bc.getList = this.getHistory;
      bc.add = this.add;
      bc.update();
      // this.model = this.history;
      this.createCSS();


      this._private.isInitialized = true;

    }

    createCSS() {
      const style = document.createElement('style');
      style.type = 'text/css';
      style.innerHTML = `
      .animatedFolderNew{
        position: absolute;
        left: ${this.container.offsetWidth}px;
        width: 100vh;
        top: ${this.container.offsetTop}px; 
       }
       
       .animatedFolderNewReverse{
        position: absolute;
        left: -${this.container.offsetWidth}px;
        width: 100vh;
        top: ${this.container.offsetTop}px; 
       }
       `;
      document.getElementsByTagName('head')[0].appendChild(style);
    }
  }
);
