var TabPanel = Namespace.declare("com.twitter.Bootstrap",
    class TabPanel extends UcpComponent {
        static get implements() { return []; };
        static start() {}

        static get dependencies() {
            return [
                "/EAMD.ucp/Components/tla/EAM/layer3/WODAViews/1.0.0/WODAViews.component.xml",
                "/EAMD.ucp/Components/com/twitter/Bootstrap/3.3.7/Bootstrap.component.xml",
                "/EAMD.ucp/Components/com/twitter/Bootstrap/Panel/3.3.7/Panel.component.xml"
            ];
        }


        constructor() {
            super();
        }

        init() {
            if (this._private.isInitialized)
                return;
            super.init();
            this.cssClasses = "";
            this.pages = [];


            return this;
        }

        get container() {
            if (!this.documentElement) return null;
            return this.documentElement.children[1];
        }

        add(component) {
            console.debug("custom component add");
            var view = null;
            if (component instanceof UcpView) {
                view = component;
                component = view.ucpComponent;
            }

            var tabItem = component.itemView;
            var componentName = tabItem.name;
            var tabs = this.getTabsDocumentElement();

            var tabContent = new TabPanelTabContentView().init(this);
            var tab = new TabPanelTabItemView().init(this);
            tab.tabContentId = tabContent.id;
            tab.tabContent = tabContent;
            tabContent.tab = tab;
            tab._private.ucpModel = component.ucpModel;
            tabContent._private.ucpModel = component.ucpModel;
            component.controller.addView(component.ucpModel, tab);

            //tab.name = componentName;

            tab.append(tabs);
            tabContent.append(this.getTabContentContainerDocumentElement());
            if (view)
                tabContent.add(view);
            else
                tabContent.add(component);
            this.pages.push(tabContent);
            this.activateTab(tabContent.tabIndex);

            //super.add(component);
        }

        updateView(view) {
            console.log("update Tabpanel");
        }


        getTabsDocumentElement() {
            return this.documentElement.children[0];
        }
        addTab(component) {
            this.add(component);
        }
        removeTab(tabIndex) {
            if (tabIndex >= this.pages.length || tabIndex < 0) return false;
            this.pages[tabIndex].tab.remove();
            this.pages[tabIndex].remove();
            var removedTab = this.pages.splice(tabIndex, 1);
            if (this.currentTabIndex == undefined)
                this.activateTab(this.pages.length - 1);
            return removedTab;
        }
        activateTab(tabIndex) {
            if (tabIndex == undefined || this.pages.length == 0) return;
            $('a[href="#' + this.pages[tabIndex].id + '"]').tab('show');
            return this.pages[tabIndex];
        }

        get currentTabIndex() {
            var p = null;
            for (p in this.pages) {
                if (this.pages[p].tab.isActive)
                    return p;
            }
        }

        get current() {
            var p = this.currentTabIndex;
            if (p ==  undefined) return null;
            return this.pages[p];
        }


        getTabContentContainerDocumentElement() {
            return this.documentElement.children[1];
        }

        createDefaultView() {
            return new TabPanelDefaultView();
        }

        createItemView() {
            return new TabPanelTabItemView();
        }

    }
);


var TabPanelDefaultView = Namespace.declare("com.twitter.Bootstrap.TabPanel",
    class TabPanelDefaultView extends DefaultView {

        append(element) {
            super.append(element);
        }


        /**
         * @todo if it is not present, Thinglish.implement(this, Container) will 
         * overwrite the get container method of DefaultView with the default implementation 
         * of the Container interface. To prevent that we have to really implement the get container method here.
         * since we do not care to reimplement it here we just return the result from the super class DefaultViewiew 
         */
        get container() {
            return super.container;
        }

        add(component) {
            this.ucpComponent.add(component);
        }

    }
);

var TabPanelTabItemView = Namespace.declare("com.twitter.Bootstrap.TabPanel",
    class TabPanelTabItemView extends ItemView {
        init(ucpComponent) {
            var controller = ucpComponent.controller;
            if (ucpComponent instanceof UcpController)
                controller = ucpComponent;

            super.init(controller);
            this._private.ucpModel = ucpComponent.ucpModel;
            this.active = true;

            return this;
        }

        /*
        loadWeBean() {
            var result = null;
            if (this.controller.ucpComponentClass.type.ucpComponentDescriptor) {
                var weBeans = this.controller.ucpComponentClass.type.ucpComponentDescriptor.webBeanUnits;
                const webBeanName = this.constructor.name + ".weBean.html";
                // @todo find webean with right name this.constructor.name+".weBean.html"
                weBeans.forEach(entry => {
                    if (entry.name == webBeanName)
                        result = entry.weBean;
                });
            }
            return result;
        }
        */

        append(element) {
            super.append(element);
        }

        get isActive() {
            if (!this.documentElement) return false;
            var active = this.documentElement.classList.contains("active");

            return active;
        }
        get tabIndex() {
            return this.parent.ucpComponent.pages.indexOf(this.tabContent);
        }

        close() {
            this.parent.ucpComponent.removeTab(this.tabIndex);
        }
    }
);

var TabPanelTabContentView = Namespace.declare("com.twitter.Bootstrap.TabPanel",
    class TabPanelTabContentView extends UcpView {
        init(ucpComponent) {
            var controller = ucpComponent.controller;
            if (ucpComponent instanceof UcpController)
                controller = ucpComponent;

            super.init(controller);
            this._private.ucpModel = ucpComponent.ucpModel;

            return this;
        }


        append(element) {
            super.append(element);
        }

        get container() {
            if (!this.documentElement) {
                if (!this.weBean)
                    return null;
                this.maintainDomElement();
            }
            return Array.from(this.documentElement.parentElement.querySelectorAll("[webean-role*='" + this.viewId + ":container']")).map(
                e => {
                    return { id: e.getAttribute("id"), name: e.getAttribute("webean-role"), tag: e, element: e }
                })[0];
        }

        get tabIndex() {
            return this.parent.ucpComponent.pages.indexOf(this);
        }

        close() {
            this.parent.ucpComponent.removeTab(this.tabIndex);
        }
    }
);