import { Host, h, } from "@stencil/core";
import { getSlot, getSlotContent, isSlotUsed } from "../../utils/helpers";
const NAV_GROUP_TAG = "IC-NAVIGATION-GROUP";
const NAV_ITEM_TAG = "IC-NAVIGATION-ITEM";
/**
 * @slot navigation - Content will be rendered at top of panel.
 * @slot buttons - Content will be rendered above version info and below navigation.
 */
export class NavigationMenu {
    constructor() {
        this.hasButtons = false;
        this.hasNavigation = false;
        this.lastTabStop = null;
        this.navGroupFirst = false;
        this.navItemAboveButtons = false;
        /**
         * The status info to display.
         */
        this.status = "";
        /**
         * Sets the theme color to the dark or light theme color. "inherit" will set the color based on the system settings or ic-theme component.
         */
        this.theme = "inherit";
        /**
         * The version info to display.
         */
        this.version = "";
        this.setLastTabStop = (lastNavGroupExpanded) => {
            let lastEl = this.navigationEls[this.navigationEls.length - 1];
            if (lastEl.tagName === NAV_GROUP_TAG && lastNavGroupExpanded) {
                const childNavItems = lastEl.children;
                lastEl = childNavItems[childNavItems.length - 1];
            }
            if (lastEl.tagName === NAV_ITEM_TAG) {
                //check for slotted content i.e. react router link
                const slotContent = getSlot(lastEl, "navigation-item");
                if (slotContent !== null) {
                    lastEl = slotContent;
                }
            }
            this.lastTabStop = lastEl;
        };
        this.closeMenu = () => {
            this.icNavigationMenuClose.emit();
        };
        this.focusCloseButton = () => {
            var _a;
            (_a = this.closeButton) === null || _a === void 0 ? void 0 : _a.focus();
        };
        this.focusLastTabStop = () => {
            let focusEl;
            if (this.lastTabStop !== null) {
                switch (this.lastTabStop.tagName) {
                    case "IC-NAVIGATION-BUTTON":
                    case NAV_ITEM_TAG:
                    case NAV_GROUP_TAG:
                        focusEl = this.lastTabStop;
                        focusEl.focus();
                        break;
                    case "A":
                        this.lastTabStop.focus();
                        break;
                }
            }
        };
    }
    componentWillLoad() {
        this.navBarEl = document.querySelector("ic-top-navigation");
        this.navigationEls = getSlotContent(this.el, "navigation");
        if (this.navigationEls) {
            this.hasNavigation = true;
            const lastEl = this.navigationEls[this.navigationEls.length - 1];
            if (lastEl.tagName === NAV_ITEM_TAG) {
                this.navItemAboveButtons = true;
            }
            else if (lastEl.tagName === NAV_GROUP_TAG) {
                lastEl.addEventListener("navigationGroupExpanded", ((event) => {
                    this.setLastTabStop(event.detail.expanded);
                }));
            }
            const firstEl = this.navigationEls[0];
            if (firstEl.tagName === NAV_GROUP_TAG) {
                this.navGroupFirst = true;
            }
        }
        const buttonContent = getSlotContent(this.el, "buttons");
        if (buttonContent !== null) {
            this.hasButtons = true;
            this.lastTabStop = buttonContent[buttonContent.length - 1];
        }
        else {
            if (this.hasNavigation && this.navigationEls) {
                this.setLastTabStop(false);
            }
        }
    }
    componentDidLoad() {
        this.focusCloseButton();
    }
    componentWillRender() {
        this.hasNavigation = isSlotUsed(this.el, "navigation");
        this.hasButtons = isSlotUsed(this.el, "buttons");
    }
    navItemClickHandler() {
        this.closeMenu();
    }
    handleKeyDown(ev) {
        if (ev.key === "Tab") {
            if (ev.shiftKey) {
                if (document.activeElement === this.navBarEl) {
                    ev.preventDefault();
                    this.focusLastTabStop();
                }
            }
            else if (document.activeElement === this.lastTabStop ||
                this.lastTabStop === null) {
                ev.preventDefault();
                this.focusCloseButton();
            }
        }
        else if (ev.key === "Escape") {
            this.closeMenu();
        }
    }
    render() {
        return (h(Host, { key: '3e06550714484b8a9d157e0391697e303fbf8259', class: { [`ic-theme-${this.theme}`]: this.theme !== "inherit" } }, h("div", { key: 'b56300f2817a5a42401570a56f5b29c90e37e336', class: "popout-modal", onClick: this.closeMenu }), h("div", { key: '081658f80afaa6d7f39971cc0f566068166b6688', class: "popout-menu", role: "dialog", "aria-modal": "true", "aria-label": `${this.hasNavigation ? "Navigation" : "App"} menu` }, h("span", { key: '67841c0d0cfb29fba7e3c722436c7e87bca1842d', "aria-hidden": "true", id: "navigation-landmark-text", class: "navigation-landmark-text" }, "Main navigation"), h("nav", { key: 'cb5aa473a04868d6af4dcd2ebc2b61ef5d785904', "aria-labelledby": "navigation-landmark-text", "aria-hidden": this.hasNavigation ? "false" : "true" }, h("div", { key: '2551b868b4c932b5fcff041bdae690e748d40430', class: {
                ["menu-close-button-container"]: true,
                ["nav-group-first"]: this.navGroupFirst,
            } }, h("ic-button", { key: '7bd12321078c63fe2ffe62ede9d9db4695b0b510', ref: (el) => (this.closeButton = el), id: "menu-close-button", class: "menu-close-button", variant: "icon", size: "large", "aria-label": `Close ${this.hasNavigation ? "navigation" : "app"} menu`, onClick: this.closeMenu }, h("svg", { key: 'da0aa67b38afb973367472a95c74d2f6e49e9fd8', width: "14", height: "14", viewBox: "0 0 14 14", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { key: 'd7d5993d336c40113eb2ae3528c429028c78fcfe', d: "M14 1.41L12.59 0L7 5.59L1.41 0L0 1.41L5.59 7L0 12.59L1.41 14L7 8.41L12.59 14L14 12.59L8.41 7L14 1.41Z" })))), this.hasNavigation && h("slot", { key: '1957640a14ad85b1ef0b3b9b330ea9f2beeb7391', name: "navigation" })), this.hasButtons && (h("div", { key: '0c92359ed82d16596420c022fa61ff2a106161dd', class: {
                ["menu-buttons-container"]: true,
                ["menu-buttons-container-nav-item-above"]: this.navItemAboveButtons,
            } }, h("slot", { key: '96f46255f4faa638122e1f567003101d42790c55', name: "buttons" }))), (this.status !== "" || this.version !== "") && (h("div", { key: '7ef37a7aa83a5e73a66d9d9c7eb99054f65f3785', class: {
                ["menu-status-version-container"]: true,
                ["status-version-no-buttons"]: !this.hasButtons,
            } }, this.status !== "" && (h("div", { key: '00a4dbcfa3fff6671c0d4a986141f321ac492b1f', class: "menu-status" }, h("ic-typography", { key: 'f176e8fe85d647789146f59f83205c99c47ced63', variant: "label-uppercase", "aria-label": "app tag", class: "menu-status-text" }, this.status))), this.version !== "" && (h("div", { key: 'c216559b1da429a6cbf910e58638fcabfeccf95a', class: "menu-version" }, h("ic-typography", { key: '4b72051f226eb2563d41fe0c239d62ed82d33701', variant: "label", class: "menu-version-text", "aria-label": "app version" }, this.version))))))));
    }
    static get is() { return "ic-navigation-menu"; }
    static get encapsulation() { return "shadow"; }
    static get originalStyleUrls() {
        return {
            "$": ["ic-navigation-menu.css"]
        };
    }
    static get styleUrls() {
        return {
            "$": ["ic-navigation-menu.css"]
        };
    }
    static get properties() {
        return {
            "status": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string | undefined",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "The status info to display."
                },
                "getter": false,
                "setter": false,
                "attribute": "status",
                "reflect": false,
                "defaultValue": "\"\""
            },
            "theme": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "IcThemeMode",
                    "resolved": "\"dark\" | \"inherit\" | \"light\" | undefined",
                    "references": {
                        "IcThemeMode": {
                            "location": "import",
                            "path": "../../utils/types",
                            "id": "src/utils/types.ts::IcThemeMode"
                        }
                    }
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "Sets the theme color to the dark or light theme color. \"inherit\" will set the color based on the system settings or ic-theme component."
                },
                "getter": false,
                "setter": false,
                "attribute": "theme",
                "reflect": false,
                "defaultValue": "\"inherit\""
            },
            "version": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string | undefined",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "The version info to display."
                },
                "getter": false,
                "setter": false,
                "attribute": "version",
                "reflect": false,
                "defaultValue": "\"\""
            }
        };
    }
    static get events() {
        return [{
                "method": "icNavigationMenuClose",
                "name": "icNavigationMenuClose",
                "bubbles": true,
                "cancelable": true,
                "composed": true,
                "docs": {
                    "tags": [{
                            "name": "internal",
                            "text": "- Emitted when the menu is closed."
                        }],
                    "text": ""
                },
                "complexType": {
                    "original": "void",
                    "resolved": "void",
                    "references": {}
                }
            }];
    }
    static get elementRef() { return "el"; }
    static get listeners() {
        return [{
                "name": "navItemClicked",
                "method": "navItemClickHandler",
                "target": undefined,
                "capture": false,
                "passive": false
            }, {
                "name": "keydown",
                "method": "handleKeyDown",
                "target": "document",
                "capture": false,
                "passive": false
            }];
    }
}
//# sourceMappingURL=ic-navigation-menu.js.map
