import { h, Host } from "@stencil/core";
import { state, onChange } from "./pn-mainnav-store";
import { arrow_left } from "pn-design-assets/pn-assets/icons.js";
export class PnMainnavLevel {
    constructor() {
        this.label = '';
        this.level = 1;
        this.levelId = '';
        this.isOpen = false;
        this.parentName = '';
        this.parentHref = '';
        this.parentLinkId = '';
        this.listCount = 0;
        this.alignment = 'right';
    }
    hostElement;
    async componentWillLoad() {
        this.setState();
        onChange('openLevel', () => {
            this.onChangeOpenLevel();
        });
    }
    setState() {
        this.listCount = this.hostElement.querySelectorAll(':scope > pn-mainnav-list').length;
        const parentElm = this.hostElement.parentElement;
        if (parentElm.tagName.toLowerCase() !== 'nav') {
            this.level = 2;
        }
        if (parentElm.tagName.toLowerCase() === 'pn-mainnav-link') {
            this.parentName = parentElm.getAttribute('name') + '';
            if ((!this.label && this.parentName) || this.label !== this.parentName) {
                this.label = this.parentName;
            }
            this.parentHref = parentElm.getAttribute('href') + '';
            this.parentLinkId = parentElm.getAttribute('linkid') + '';
            const parentLinkName = this.parentName.toLowerCase().replace(/\W/gi, '_');
            this.levelId = `mainnav-lvl${this.level}-${parentLinkName}`;
        }
    }
    onOpen() {
        if (this.level === 2) {
            requestAnimationFrame(() => {
                const levelClientRect = this.hostElement.getClientRects()[0];
                if (!levelClientRect) {
                    return;
                }
                const navElm = this.hostElement.parentElement.parentElement.parentElement.parentElement;
                if (navElm && navElm.tagName.toLowerCase() === 'nav') {
                    const navClientRect = navElm.getClientRects()[0];
                    if (!navClientRect) {
                        return;
                    }
                    if (levelClientRect.right > window.innerWidth) {
                        const levelParentRect = this.hostElement.parentElement.getClientRects()[0];
                        if (levelParentRect.left - levelClientRect.width < 0) {
                            this.alignment = 'center';
                        }
                        else {
                            this.alignment = 'left';
                        }
                    }
                }
            });
        }
    }
    onChangeOpenLevel() {
        this.isOpen = state.openLevel === this.levelId;
        state.currentLevel = this.level;
    }
    render() {
        return (h(Host, { key: '1717f62604a0b8a245bc26eb0cf55b72192b5592', ...(this.level > 1 && this.levelId ? { 'aria-hidden': !this.isOpen + '' } : {}), "data-level-listcount": this.listCount + '', "data-level-alignment": this.alignment, "data-level": this.level + '', ...(this.levelId ? { id: this.levelId } : {}) }, this.level > 1 ? (h("div", { class: "mainnav-level-header" }, h("label", { htmlFor: this.levelId }, state.i18n.menuGoBackButton), h("button", { class: "secondlevel-backbtn", onClick: () => {
                state.openLevel = '';
                state.currentLevel = 1;
            }, "aria-expanded": (state.openLevel === this.levelId) + '' }, h("pn-icon", { icon: arrow_left, color: "blue700" }), state.i18n.menuStartButton), this.parentHref && this.label ? h("pn-mainnav-link", { href: this.parentHref, name: this.label, linkid: this.parentLinkId }) : null)) : null, h("slot", { key: '582cdd7a6bc61e25e6a196fc17c43bce3907033a', name: "top" }), h("slot", { key: '2b076344434db3b9b844423f4a797e793deba873' }), h("slot", { key: 'd45c6146209b2eed25166a38285f06aa5ae66a53', name: "additional" }), h("slot", { key: '5f29d378a41d9e8eee471cb131fac87bf5767572', name: "footer" })));
    }
    static get is() { return "pn-mainnav-level"; }
    static get originalStyleUrls() {
        return {
            "$": ["pn-mainnav-level.scss"]
        };
    }
    static get styleUrls() {
        return {
            "$": ["pn-mainnav-level.css"]
        };
    }
    static get properties() {
        return {
            "label": {
                "type": "string",
                "mutable": true,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "attribute": "label",
                "reflect": true,
                "defaultValue": "''"
            }
        };
    }
    static get states() {
        return {
            "level": {},
            "levelId": {},
            "isOpen": {},
            "parentName": {},
            "parentHref": {},
            "parentLinkId": {},
            "listCount": {},
            "alignment": {}
        };
    }
    static get elementRef() { return "hostElement"; }
    static get watchers() {
        return [{
                "propName": "label",
                "methodName": "setState"
            }, {
                "propName": "isOpen",
                "methodName": "onOpen"
            }];
    }
}
//# sourceMappingURL=pn-mainnav-level.js.map
