export 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 "/**style-placeholder:ema-navbar:**/"; }
}
