/* global UcpComponentSupport */
var AnimatedPage = Namespace.declare("com.twitter.Bootstrap",
  class AnimatedPage extends UcpComponent {

    static start() {
      UcpComponentSupport.importLink(this.controller.basePath + "src/css/animatedPage.css", "stylesheet", "text/css");

    }

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

    constructor() {
      super();
      this.classes = "";
      this.fullHeight = true;
      this.overflow = "hidden";
      Thinglish.defineAlias(this, "classes", "cssClasses");
    }

    init() {
      if (this.isInitialized) {
        return;
      }
      super.init();
      if (this.defaultView.landing) {
        this.load(this.defaultView.landing);
      }
      this.onPopState =  this.onPopState.bind(this);
      window.onpopstate = this.onPopState;

      return this;
    }

    load($event, back) {
      let href;
      if ($event.preventDefault) {
        $event.preventDefault();
        href = $event.path.shift().href;
      } else {
        href = $event;
      }

      const direction = -1;
      const client = new XMLHttpRequest();
      client.component = this;
      client.onload = function () {
        if (client.readyState === 4 && client.status === 200) {
          client.component.createDiv(client.response, direction);
          if (!back) {
            history.pushState({location: href}, href);
          }
        }
      };
      client.open("GET", href);
      client.send();
    }
    createDiv(text, direction) {
      this.newContainerId = (Math.random()).toString(16).replace(/\./, '');
      const newContainer = document.createElement('div');
      newContainer.innerHTML = text;
      newContainer.id = this.newContainerId;
      const currentContainer = this.currentContainer;
      newContainer.className = `animatedPageContainerNew animation`;
      let isProcessed = false;
      if (currentContainer) {
        currentContainer.className = 'animatedPageContainer animation';
        newContainer.addEventListener('transitionend', () => {
          if(!isProcessed) {
            isProcessed = true;
            newContainer.removeAttribute('style');
            newContainer.className = 'animatedPageContainer';
            currentContainer.remove();
            this.currentContainerId = this.newContainerId;
            this.processLinks();
          }

        }, false);
        this.wrapperContainer.appendChild(newContainer);
        newContainer.style.transform = `translate(${direction * this.wrapperContainer.offsetWidth}px)`;
        currentContainer.style.transform = `translate(${direction * this.wrapperContainer.offsetWidth}px)`;
      } else {
        newContainer.className = 'animatedPageContainer';
        this.currentContainerId = this.newContainerId;
        this.wrapperContainer.appendChild(newContainer);
        this.processLinks();
        this.createCSS();
      }
    }

    createCSS() {
      const style = document.createElement('style');
      style.type = 'text/css';
      style.innerHTML = `
  .animatedPageContainerNew{
    position: relative;
    left: ${this.wrapperContainer.offsetWidth}px;
    top: -${this.wrapperContainer.offsetHeight}px;
   }
   
  `;
      document.getElementsByTagName('head')[0].appendChild(style);
    }
    get wrapperContainer() {
      return this.defaultView.documentElement.children[0];
    }
    get currentContainer() {
        return document.getElementById(this.currentContainerId);
    }
    get newContainer() {
      return document.getElementById(this.newContainerId);
    }

    processLinks() {
      const currentContainer = this.currentContainer;
      if(currentContainer) {
        const arr = Array.prototype.slice.call(currentContainer.getElementsByTagName('a'));
        arr.forEach(item => item.addEventListener('click', $event => {
          this.load($event);
        }));
      }

    }
    onPopState(event) {
      const href = event.state.location;
      this.load(href, true);
    }

    toggleFullHeight(newValue) {
      if (newValue === undefined) {
        this.fullHeight = newValue = !this.fullHeight;
      }
      this.fullHeight = newValue;
      let element = this.documentElement;
      if (element) {
        this.manageFullHeightCssClass(element);
        this.manageFullHeightCssClass(element.children[0]);
        /*
        if (this.fullHeight) {
          element.children[0].children[1].style.height = "80%";
        } else {
          element.children[0].children[1].style.height = "";
        }
        */
        while (element) {
          element.classList.add("fullHeight");
          element = element.parentElement;
        }
      }
    }
    manageFullHeightCssClass(element) {
      if (element) {
        if (this.fullHeight) {
          if (!element.classList.contains("fullHeight")) {
            element.classList.add("fullHeight");
          }
        } else {
          element.classList.remove("fullHeight");
        }

      }
    }
    updateView(view) {
      if (view instanceof DefaultView) {
        this.toggleFullHeight(this.fullHeight);
      }
    }
  }
);