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

        static get implements() { return []; };
        static start() {
            UcpComponentSupport.importLink(this.controller.basePath + "src/css/animatedPage.css", "stylesheet", "text/css");

        }

        static get 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._private.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);
            }
        }
    }
);