import { h } from '../webcomponents.core.js';

class Navbar {
    constructor() {
        this.menuItems = null;
        this.logo = null;
        this.position = 'scroll';
        this.lastScrollState = 0;
        this.fixedScroll = false;
    }
    componentWillLoad() {
        this.innerMenuItems = JSON.parse(this.menuItems);
    }
    componentDidLoad() {
        this.moveMenu();
        this.setActiveMenuItem();
        switch (this.position) {
            case 'fixed':
                this.navElement.style.position = 'fixed';
                break;
            case 'fixed-scroll':
                this.navElement.style.position = 'fixed';
                this.navElement.style.webkitTransition = "transform 0.2s ease-out";
                this.navElement.style.transition = "transform 0.2s ease-out";
                this.navElement.style.transform = 'translateY(0%)';
                this.fixedScroll = true;
                break;
            case 'scroll':
                break;
            default:
                throw new Error("Position information is invalid. Can be set to: 'fixed', 'fixed-scroll', 'scroll'");
        }
    }
    render() {
        return ([
            h("nav", { ref: (element) => this.navElement = element },
                h("div", { class: "navbar-wrapper" },
                    this.createLogo(),
                    h("ul", { id: "desktop-menu", ref: (element) => this.desktopMenu = element }, this.createMenuItems()),
                    h("div", { ref: (element) => this.menuIcon = element, class: "menuIcon", onClick: () => this.toggleMobileMenu() },
                        h("span", { class: "bar1" }),
                        h("span", { class: "bar2" }),
                        h("span", { class: "bar3" })))),
            h("div", { class: "overlay-menu", ref: (element) => this.overlayMenu = element },
                h("ul", { id: "mobile-menu", ref: (element) => this.mobileMenu = element }))
        ]);
    }
    createMenuItems() {
        var htmlItems = [];
        if (this.menuItems != null) {
            this.innerMenuItems.map(menuItem => {
                htmlItems.push(h("li", null,
                    h("a", { href: menuItem.url, onClick: (event) => this.menuClick(event) }, menuItem.name)));
            });
        }
        else {
            for (var i = 0; i < this.itemCount; i++) {
                htmlItems.push(h("li", { onClick: (event) => this.menuClick(event) },
                    h("slot", { name: 'item-' + (i + 1) })));
            }
        }
        return htmlItems;
    }
    createLogo() {
        if (this.logo == null) {
            return;
        }
        else {
            return h("div", { class: "logo" },
                h("a", { href: "/" },
                    h("img", { class: "logo-image", src: this.logo })));
        }
    }
    toggleMobileMenu() {
        this.menuIcon.classList.toggle('opened');
        if (this.menuIcon.classList.contains('opened')) {
            this.overlayMenu.style.transform = 'translateX(0%)';
            this.overlayMenu.style.transition = 'transform 0.4s ease-out';
            document.body.style.position = "fixed";
            document.documentElement.style.position = "fixed";
        }
        else {
            this.overlayMenu.style.transform = 'translateX(-100%)';
            this.overlayMenu.style.transition = 'transform 0.4s ease-out';
            document.body.style.position = null;
            document.documentElement.style.position = null;
        }
    }
    menuClick(ev) {
        var activeElements = document.getElementsByClassName('active');
        for (var i = 0; i < activeElements.length; i++) {
            activeElements[i].classList.remove('active');
        }
        ev.srcElement.classList.add('active');
        if (this.mobileMenu.children.length > 0) {
            this.toggleMobileMenu();
        }
    }
    setActiveMenuItem() {
        var url = document.location.href;
        var menuItems = document.getElementsByTagName('a');
        for (var i = 0; i < menuItems.length; i++) {
            var anchorMenuItem = menuItems[i];
            if (anchorMenuItem.href == url) {
                menuItems[i].classList.add('active');
            }
        }
    }
    moveMenu() {
        if (window.innerWidth <= 638 && this.desktopMenu.children.length != 0) {
            while (this.desktopMenu.children.length > 0) {
                this.mobileMenu.appendChild(this.desktopMenu.childNodes[0]);
            }
        }
        else if (window.innerWidth > 638 && this.mobileMenu.children.length != 0) {
            if (this.menuIcon.classList.contains('opened')) {
                this.toggleMobileMenu();
            }
            while (this.mobileMenu.children.length > 0) {
                this.desktopMenu.appendChild(this.mobileMenu.childNodes[0]);
            }
        }
    }
    bodyScroll() {
        if (this.fixedScroll && !this.menuIcon.classList.contains('opened')) {
            var scrollState = document.documentElement.scrollTop || document.body.scrollTop;
            if (scrollState == 0) ;
            else if (scrollState > this.lastScrollState) {
                this.navElement.style.transform = 'translateY(-100%)';
            }
            else {
                this.navElement.style.transform = 'translateY(0%)';
            }
            this.lastScrollState = scrollState <= 0 ? 0 : scrollState;
        }
    }
    static get is() { return "ema-navbar"; }
    static get encapsulation() { return "shadow"; }
    static get properties() { return {
        "desktopMenu": {
            "state": true
        },
        "innerMenuItems": {
            "state": true
        },
        "itemCount": {
            "type": Number,
            "attr": "item-count",
            "reflectToAttr": true
        },
        "logo": {
            "type": String,
            "attr": "logo",
            "reflectToAttr": true
        },
        "menuIcon": {
            "state": true
        },
        "menuItems": {
            "type": String,
            "attr": "menu-items",
            "reflectToAttr": true
        },
        "mobileMenu": {
            "state": true
        },
        "navElement": {
            "state": true
        },
        "overlayMenu": {
            "state": true
        },
        "position": {
            "type": String,
            "attr": "position",
            "reflectToAttr": true
        }
    }; }
    static get listeners() { return [{
            "name": "window:resize",
            "method": "moveMenu",
            "passive": true
        }, {
            "name": "window:scroll",
            "method": "bodyScroll",
            "passive": true
        }]; }
    static get style() { return ":host{--ema-navbar-background:#e9ecef;--ema-navbar-color:#46444b;--ema-navbar-hover-color:#cc95f3;--ema-navbar-height:50px;--ema-navbar-text-transform:uppercase;--ema-navbar-a-padding:0 24px;--ema-navbar-a-font-size:0.9em;--ema-navbar-a-font-family:Arial,Helvetica,sans-serif;--ema-navbar-mobile-a-font-size:1.8em}nav{background-color:var(--ema-navbar-background);color:var(--ema-navbar-color);top:0;height:var(--ema-navbar-height);line-height:var(--ema-navbar-height);width:100%;z-index:1000}.navbar-wrapper{margin:auto;text-align:right;width:70%}\@media (max-width:768px){.navbar-wrapper{width:90%}}\@media (max-width:638px){.navbar-wrapper{width:100%}}.logo{float:left;margin-left:28px;font-size:1.5em;height:calc(var(--ema-navbar-height) - 10px);letter-spacing:1px;text-transform:var(--ema-navbar-text-transform)}.logo-image{max-height:100%;width:auto}\@media (max-width:768px){.logo{margin-left:5px}}ul{display:inline-block;float:right;list-style:none;margin-top:-2px;text-align:right;-webkit-transition:-webkit-transform .5s ease-out;transition:-webkit-transform .5s ease-out;transition:transform .5s ease-out;transition:transform .5s ease-out,-webkit-transform .5s ease-out;-webkit-transition:transform .5s ease-out}\@media (max-width:638px){ul{display:none}}\@media (orientation:landscape){ul{display:inline-block}}li{display:inline-block}::slotted(a),a{color:var(--ema-navbar-color);display:block;font-size:var(--ema-navbar-a-font-size);height:var(--ema-navbar-height);letter-spacing:1px;padding:var(--ema-navbar-a-padding);position:relative;text-decoration:none;text-transform:var(--ema-navbar-text-transform);transition:all .5s ease;-webkit-transition:all .5s ease}.overlay-menu ::slotted(a),.overlay-menu a{display:inline-block;width:100%;padding:0;text-align:center;line-height:var(--ema-navbar-height)}.overlay-menu ul{width:100%}::slotted(a.active),::slotted(a:active),::slotted(a:hover),a.active,a:active,a:hover{color:var(--ema-navbar-hover-color)}::slotted(a:hover),a:hover{transition:all 1s ease;-webkit-transition:all 1s ease}::slotted(a:after),::slotted(a:before),a:after,a:before{content:\"\";position:absolute;width:0;height:1px;bottom:-1px;background:var(--ema-navbar-hover-color)}::slotted(a:before),a:before{left:0;-webkit-transition:.5s;transition:.5s}::slotted(a:after),a:after{background:var(--ema-navbar-hover-color);right:0}::slotted(a:hover:before),a:hover:before{background:var(--ema-navbar-hover-color);width:100%;-webkit-transition:width .5s cubic-bezier(.22,.61,.36,1);transition:width .5s cubic-bezier(.22,.61,.36,1)}::slotted(a:hover:after),a:hover:after{background:transparent;width:100%}\@media (max-width:638px){.menuIcon{display:inline-block;cursor:pointer;position:relative;top:10px;right:25px;height:23px;width:20px;z-index:20}.bar1{top:0}.bar1,.bar2{background:var(--ema-navbar-color);height:2px;width:100%;-webkit-transition:.4s;transition:.4s;position:absolute;left:0}.bar2{top:8px}.bar3{background:var(--ema-navbar-color);height:2px;width:100%;-webkit-transition:.4s;transition:.4s;position:absolute;top:16px;left:0}.opened .bar1{-webkit-transform:rotate(-45deg) translate(-5px,6px);transform:rotate(-45deg) translate(-5px,6px)}.opened .bar2{opacity:0}.opened .bar3{-webkit-transform:rotate(45deg) translate(-5px,-6px);transform:rotate(45deg) translate(-5px,-6px)}}.overlay-menu{background:var(--ema-navbar-background);color:var(--ema-navbar-color);-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;position:fixed;top:var(--ema-navbar-height);left:0;margin-right:15px;padding-top:15px;-webkit-transform:translateX(-100%);transform:translateX(-100%);width:100vw;height:100vh;-webkit-transition:transform .4s ease-out;-webkit-transition:-webkit-transform .4s ease-out;transition:-webkit-transform .4s ease-out;transition:transform .4s ease-out;transition:transform .4s ease-out,-webkit-transform .4s ease-out}.overlay-menu li,.overlay-menu ul{display:block;position:relative}.overlay-menu li a{display:block;font-size:var(--ema-navbar-mobile-a-font-size);font-family:var(--ema-navbar-a-font-family);letter-spacing:4px;padding:10px 0;text-align:right;text-transform:var(--ema-navbar-text-transform);-webkit-transition:color .3s ease;transition:color .3s ease;width:100%}.overlay-menu li a:active,.overlay-menu li a:hover{color:var(--ema-navbar-hover-color);-webkit-transition:color .3s ease;transition:color .3s ease}"; }
}

export { Navbar as EmaNavbar };
