import { Host, h, } from "@stencil/core";
import { IcBrandForegroundEnum, } from "../../utils/types";
import { checkResizeObserver, DEVICE_SIZES, getCurrentDeviceSize, getBrandForegroundAppearance, getSlot, onComponentPropUndefinedChange, onComponentRequiredPropUndefined, isSlotUsed, isEmptyString, isPropDefined, } from "../../utils/helpers";
/**
 * @slot app-icon - Content will be rendered to left of app title. Anything that is slotted here will be hidden from screen readers.
 * @slot app-title - Handle routing by nesting a route in the app title.
 * @slot short-app-title - Handle routing by nesting a route in the short app title (to be displayed in place of app title on small screen sizes).
 * @slot search - Content will be rendered in search area to left of buttons.
 * @slot toggle-icon - Icon to be displayed on the button to toggle search slot content on smaller devices
 * @slot navigation - Content will be rendered in navigation panel.
 * @slot buttons - Content will be rendered to right of search bar.
 */
export class TopNavigation {
    constructor() {
        this.hasAppIcon = false;
        this.hasIconButtons = false;
        this.hasNavigation = false;
        this.hasSearchSlotContent = false;
        this.resizeObserver = null;
        this.searchBar = null;
        this.deviceSize = DEVICE_SIZES.XL;
        this.foregroundColor = getBrandForegroundAppearance();
        this.hasFullWidthSearchBar = false;
        this.mobileSearchBarVisible = false;
        this.mobileSearchHiddenOnBlur = false;
        this.navMenuVisible = false;
        this.searchButtonClick = false;
        this.searchValue = "";
        /**
         * The alignment of the top navigation content.
         */
        this.contentAligned = "full-width";
        /**
         * Can set a custom breakpoint for the top navigation to switch to mobile mode.
         * Must be one of our specified breakpoints in px: `0`, `576`, `768`, `992`, `1200`.
         */
        this.customMobileBreakpoint = DEVICE_SIZES.L;
        /**
         *  The URL to navigate to when the app title is clicked.
         */
        this.href = "/";
        /**
         * If `true`, the flyout navigation menu on small devices will be contained by the parent element.
         */
        this.inline = false;
        /**
         * The short title of the app to be displayed at small screen sizes in place of the app title.
         */
        this.shortAppTitle = "";
        /**
         * The status info to be displayed.
         */
        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 be displayed.
         */
        this.version = "";
        this.checkSlots = () => {
            this.hasAppIcon = isSlotUsed(this.el, "app-icon");
            this.hasNavigation = isSlotUsed(this.el, "navigation");
            this.hasIconButtons = isSlotUsed(this.el, "buttons");
            this.hasSearchSlotContent = isSlotUsed(this.el, "search");
        };
        this.initialiseSearchBar = () => {
            if (this.hasSearchSlotContent) {
                const slot = getSlot(this.el, "search");
                if ((slot === null || slot === void 0 ? void 0 : slot.tagName) === "IC-SEARCH-BAR") {
                    this.searchBar = slot;
                }
                else if ((slot === null || slot === void 0 ? void 0 : slot.tagName) === "FORM") {
                    this.searchBar = slot.querySelector("ic-search-bar");
                }
                if (this.searchBar !== null) {
                    this.searchBar.hideLabel = true;
                }
            }
        };
        this.menuButtonClick = () => {
            this.showNavMenu(true);
        };
        this.searchButtonMouseDownHandler = () => {
            this.searchButtonClick = true;
        };
        this.searchButtonClickHandler = () => {
            this.toggleSearchBar();
            this.searchButtonClick = false;
        };
        this.resizeObserverCallback = (currSize) => {
            if (currSize !== this.deviceSize) {
                this.deviceSize = currSize;
                if (currSize > this.customMobileBreakpoint) {
                    this.showNavMenu(false);
                    if (this.mobileSearchBarVisible) {
                        this.toggleSearchBar();
                    }
                }
                this.icTopNavResized.emit({
                    size: currSize,
                });
                if (this.searchBar && document.activeElement === this.searchBar) {
                    this.searchBar.setAttribute("hidden", "true");
                    //remove attribute again as this trigger a redraw & applies css
                    this.searchBar.removeAttribute("hidden");
                    setTimeout(() => {
                        var _a;
                        (_a = this.searchBar) === null || _a === void 0 ? void 0 : _a.focus();
                    }, 100);
                }
            }
        };
        this.runResizeObserver = () => {
            this.resizeObserver = new ResizeObserver(() => {
                this.resizeObserverCallback(getCurrentDeviceSize());
            });
            this.resizeObserver.observe(this.el);
        };
    }
    watchPropHandler(newValue, oldValue) {
        //added for Gatsby rehydration issue where prop is initially undefined but then changes to actual value
        //this watch can be removed once Gatsby hydration issue is resolved
        onComponentPropUndefinedChange(oldValue, newValue, this.initialiseSearchBar);
    }
    disconnectedCallback() {
        var _a;
        (_a = this.resizeObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
    }
    componentWillLoad() {
        this.checkSlots();
        this.deviceSize = getCurrentDeviceSize();
        this.initialiseSearchBar();
    }
    componentDidLoad() {
        checkResizeObserver(this.runResizeObserver);
        !isSlotUsed(this.el, "app-title") &&
            onComponentRequiredPropUndefined([{ prop: this.appTitle, propName: "app-title" }], "Top Navigation");
    }
    componentWillRender() {
        this.checkSlots();
    }
    navBarMenuCloseHandler() {
        var _a, _b;
        this.showNavMenu(false);
        (_b = (_a = this.el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector("#menu-button")) === null || _b === void 0 ? void 0 : _b.focus();
    }
    searchInputBlurHandler({ detail, }) {
        if (detail !== null) {
            if (this.mobileSearchBarVisible && !this.searchButtonClick) {
                //don't hide if blur was triggered by click on search button - let the click handler toggle the state
                this.toggleSearchBar();
            }
            this.searchValue = detail.value;
        }
    }
    searchValueChangeHandler({ detail }) {
        this.searchValue = detail.value;
    }
    brandChangeHandler({ detail }) {
        this.foregroundColor = detail.mode;
    }
    toggleSearchBar() {
        var _a;
        this.mobileSearchBarVisible = !this.mobileSearchBarVisible;
        if (this.searchBar !== null) {
            (_a = this.mobileSearchButtonEl) === null || _a === void 0 ? void 0 : _a.setAttribute("aria-label", `${this.mobileSearchBarVisible ? "Hide" : "Show"} search`);
            this.hasFullWidthSearchBar = this.mobileSearchBarVisible;
            this.searchBar.fullWidth = this.mobileSearchBarVisible;
            if (this.mobileSearchBarVisible) {
                setTimeout(() => {
                    var _a;
                    (_a = this.searchBar) === null || _a === void 0 ? void 0 : _a.focus();
                }, 100);
            }
        }
    }
    showNavMenu(show) {
        this.navMenuVisible = show;
        (show ? this.icNavigationMenuOpened : this.icNavigationMenuClosed).emit();
        document.body.style.height = show ? "100%" : "auto";
        document.body.style.overflow = show ? "hidden" : "auto";
    }
    render() {
        const { appTitle, contentAligned, customMobileBreakpoint, deviceSize, el, foregroundColor, hasAppIcon, hasFullWidthSearchBar, hasIconButtons, hasNavigation, hasSearchSlotContent, href, inline, menuButtonClick, mobileSearchBarVisible, navMenuVisible, searchButtonClickHandler, searchButtonMouseDownHandler, shortAppTitle, status, version, theme, } = this;
        const hasStatus = status !== "";
        const hasVersion = version !== "";
        const hasMenuContent = hasNavigation || hasIconButtons || hasStatus || hasVersion;
        const searchButtonSize = deviceSize <= DEVICE_SIZES.S ? "medium" : "large";
        const hasTitle = appTitle !== "" && isPropDefined(appTitle);
        const overMobileBreakpoint = deviceSize <= customMobileBreakpoint;
        const appTitleVariant = overMobileBreakpoint
            ? deviceSize <= DEVICE_SIZES.S
                ? "subtitle-small"
                : "h4"
            : "h3";
        const mobileSearchButtonTitle = `${mobileSearchBarVisible ? "Hide" : "Show"} search`;
        const menuSize = deviceSize <= DEVICE_SIZES.S ? "small" : "medium";
        const shortAppTitleSlot = isSlotUsed(el, "short-app-title");
        const hasAppTitleSlot = isSlotUsed(el, "app-title");
        const Component = hasAppTitleSlot ? "div" : "a";
        const attrs = Component == "a" && {
            href: href,
        };
        return (h(Host, { key: 'c34e31b1c026aa42f639599a271e7a3c2dba0ec0', class: {
                "fullwidth-searchbar": hasFullWidthSearchBar,
                "mobile-mode": overMobileBreakpoint,
                [IcBrandForegroundEnum.Dark]: foregroundColor === IcBrandForegroundEnum.Dark,
                [`ic-theme-${theme}`]: theme !== "inherit",
            } }, h("div", { key: 'd266b2df2d3a15532911b76e5372a77355d27b02', class: "top-navigation" }, h("ic-section-container", { key: '444caa24a5e6da0186b98b61bcbce33aebaf0e61', aligned: contentAligned, "full-height": true }, h("header", { key: 'fcc8737fb7c54abd463b716cc09589bb56a5d34c', role: "banner" }, h("div", { key: '84139029b5bd3ca31e6bec51f45126ff72d8110a', class: "top-panel-container" }, h("div", { key: '0d670149118d30f5cf7852a72a79810ad4978d26', class: "app-details-container" }, (hasTitle || hasAppTitleSlot) && (h(Component, Object.assign({ key: 'c17c88b16b367927568160d5e11373ff13329ac5', class: "title-link" }, attrs), hasAppIcon && (h("div", { key: '9847777727de0f0da511523d04c72ce980027151', class: "app-icon-container" }, h("slot", { key: '2d44296eb3f6469de56faeb9870b6d096516f23c', name: "app-icon" }))), deviceSize <= DEVICE_SIZES.S &&
            (!isEmptyString(shortAppTitle) || shortAppTitleSlot) ? (h("ic-typography", { variant: "subtitle-small", "aria-label": (!hasAppTitleSlot || !shortAppTitleSlot) &&
                `${appTitle} (${shortAppTitle})` }, h("h1", null, shortAppTitleSlot ? (h("slot", { name: "short-app-title" })) : (shortAppTitle)))) : (h("ic-typography", { variant: appTitleVariant }, h("h1", { class: "title-wrap" }, hasAppTitleSlot ? (h("slot", { name: "app-title" })) : (appTitle)))))), hasStatus && (h("div", { key: '3a25c523a8b2f866979c6b216b8320a0d378ea25', class: "app-status" }, h("ic-typography", { key: '06e42ccfca3a13ca36e39270ffd7380bd8d0a3da', "aria-label": "app tag", variant: "label-uppercase", class: "app-status-text" }, status))), hasVersion && (h("div", { key: 'd876b6c44e8f17aac75467e15e0e644b904f7ee4', class: "app-version" }, h("ic-typography", { key: 'adb1db74b83577008a831898ab4c59814be0b271', variant: "label", class: "app-version-text", "aria-label": "app version" }, version)))), (hasSearchSlotContent || hasMenuContent) && (h("div", { key: '363c60544cb4581ae9e31a58c63fedc6aee76447', class: "search-menu-container" }, h("div", { key: '6519a88057979775cfc6081a952e85d3b9417c28', class: "search-actions-container" }, !overMobileBreakpoint && h("slot", { key: 'd174b13453134aa9fedff9a95508dbbac96469a1', name: "search" }), hasSearchSlotContent && overMobileBreakpoint && (h("ic-button", { key: '6e102532a61df76174edecf38f8d2dddde722cf5', id: "search-toggle-button", ref: (el) => (this.mobileSearchButtonEl = el), onMouseDown: searchButtonMouseDownHandler, variant: "icon-tertiary", monochrome: true, size: searchButtonSize, "aria-label": mobileSearchButtonTitle, theme: foregroundColor, onClick: searchButtonClickHandler }, h("slot", { key: 'f910700c47c5878c345470ed9294a33007ce7ead', name: "toggle-icon" }, h("svg", { key: '3d3d934259563eadf67075018a41eb653438f1ea', xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "#ffffff" }, h("path", { key: '5fff46e4c3da77500acd290d5728f60097673a05', d: "M0 0h24v24H0V0z", fill: "none" }), h("path", { key: '045e973ca81352d2a1bb48579ced25d19f4a1f2a', d: "M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z" }))))), hasIconButtons && !overMobileBreakpoint && (h("div", { key: '5fb7278bd4d60f60d21897f1fb96ec7f3a57c87b', class: "icon-buttons-container" }, h("slot", { key: '190d7b5915c3fbbf6347cb3ddc272f9dfc046ac3', name: "buttons" }))), hasMenuContent && overMobileBreakpoint && (h("div", { key: 'a91b5a189c4146e12e90e740001ad0b77679cc77', class: "menu-button-container" }, h("span", { key: 'd218781625f5e261764968eb84e03a32e905383d', id: "navigation-landmark-button-text", class: "navigation-landmark-button-text", "aria-hidden": "true" }, "Main navigation button"), h("nav", { key: '957a343cc283945aceb2bf4f886dadcb8149d118', "aria-labelledby": "navigation-landmark-button-text", "aria-hidden": `${navMenuVisible}` }, h("ic-button", { key: 'e17765454e8a5102b732cf2b12a45ddb8d2426fc', id: "menu-button", theme: foregroundColor, variant: "secondary", monochrome: true, "aria-expanded": "false", "aria-haspopup": "true", "aria-label": `Open ${hasNavigation ? "navigation" : "app"} menu`, size: menuSize, onClick: menuButtonClick }, "Menu", h("svg", { key: '8595a3640057e8cbc4d6a74fc16bfe11007052bd', xmlns: "http://www.w3.org/2000/svg", height: "24px", viewBox: "0 0 24 24", width: "24px", fill: "#ffffff", slot: "left-icon" }, h("path", { key: '0a2dd66668d2b8a99981303024d0a9f409197142', d: "M0 0h24v24H0V0z", fill: "none" }), h("path", { key: '6e4ee39265832993f8756c3208f451936fb78a5b', d: "M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z" })))))))))), mobileSearchBarVisible && (h("div", { key: '7351262fd2c64de0b2572e63011461a17fc9effc', class: "search-bar-container" }, h("slot", { key: '1db63ef6eac0ee7efbf59f8427149c8990182fcf', name: "search" }))), hasNavigation && !overMobileBreakpoint && (h("div", { key: 'c70583f725a90a91bbf09560bddf556ae2dfe9c9', class: "navigation-tabs" }, h("span", { key: 'b87db18c6fbd55a9d56f7caa915c41d9cb7efc81', id: "navigation-landmark-text", class: "navigation-landmark-text", "aria-hidden": "true" }, "Main pages"), h("nav", { key: 'f7337c8fd73f1b2c89a35db9ed1f136bbab22c16', "aria-labelledby": "navigation-landmark-text", class: "nav-panel-container" }, h("ic-horizontal-scroll", { key: '017e0ce9c0cd0f931fbe86cbebb0680b473e90c8', monochrome: true, appearance: foregroundColor }, h("ul", { key: 'd8cc0609df1f348acaf9f2cdce3f50e0583416c5', class: "navigation-item-list", tabindex: "-1" }, h("slot", { key: '9f63d68cb7b5410e3b43c8ce2d034c1842981701', name: "navigation" }))))))))), navMenuVisible && (h("ic-navigation-menu", { key: '7db1c7865aae2836052e0911608179e294a98519', version: version, status: status, class: {
                ["inline"]: !!inline,
            } }, hasIconButtons && (h("div", { key: 'b4110d809aa48b74b4802463d85743b6dc892978', class: "menu-buttons-slot", slot: "buttons" }, h("slot", { key: '4d31e22407e559d9435fae39e89a6f6612bee4bd', name: "buttons" }))), h("ul", { key: 'a2ad4a21c9b34e86c242addfb56bb0c31a87a230', slot: "navigation" }, h("slot", { key: 'c9c150aa1431942415593722be13d22291eb2b19', name: "navigation" }))))));
    }
    static get is() { return "ic-top-navigation"; }
    static get encapsulation() { return "shadow"; }
    static get originalStyleUrls() {
        return {
            "$": ["ic-top-navigation.css"]
        };
    }
    static get styleUrls() {
        return {
            "$": ["ic-top-navigation.css"]
        };
    }
    static get properties() {
        return {
            "contentAligned": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "IcAlignment",
                    "resolved": "\"center\" | \"full-width\" | \"left\" | undefined",
                    "references": {
                        "IcAlignment": {
                            "location": "import",
                            "path": "../../utils/types",
                            "id": "src/utils/types.ts::IcAlignment"
                        }
                    }
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "The alignment of the top navigation content."
                },
                "getter": false,
                "setter": false,
                "attribute": "content-aligned",
                "reflect": false,
                "defaultValue": "\"full-width\""
            },
            "customMobileBreakpoint": {
                "type": "number",
                "mutable": false,
                "complexType": {
                    "original": "IcDeviceSizes",
                    "resolved": "0 | 1200 | 576 | 768 | 992 | undefined",
                    "references": {
                        "IcDeviceSizes": {
                            "location": "import",
                            "path": "../../utils/types",
                            "id": "src/utils/types.ts::IcDeviceSizes"
                        }
                    }
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "Can set a custom breakpoint for the top navigation to switch to mobile mode.\nMust be one of our specified breakpoints in px: `0`, `576`, `768`, `992`, `1200`."
                },
                "getter": false,
                "setter": false,
                "attribute": "custom-mobile-breakpoint",
                "reflect": false,
                "defaultValue": "DEVICE_SIZES.L"
            },
            "href": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string | undefined",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "The URL to navigate to when the app title is clicked."
                },
                "getter": false,
                "setter": false,
                "attribute": "href",
                "reflect": false,
                "defaultValue": "\"/\""
            },
            "inline": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean | undefined",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "If `true`, the flyout navigation menu on small devices will be contained by the parent element."
                },
                "getter": false,
                "setter": false,
                "attribute": "inline",
                "reflect": false,
                "defaultValue": "false"
            },
            "shortAppTitle": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string | undefined",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "The short title of the app to be displayed at small screen sizes in place of the app title."
                },
                "getter": false,
                "setter": false,
                "attribute": "short-app-title",
                "reflect": false,
                "defaultValue": "\"\""
            },
            "status": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string | undefined",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "The status info to be displayed."
                },
                "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 be displayed."
                },
                "getter": false,
                "setter": false,
                "attribute": "version",
                "reflect": false,
                "defaultValue": "\"\""
            },
            "appTitle": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string | undefined",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "The app title to be displayed. This is required, unless a slotted app title link is used."
                },
                "getter": false,
                "setter": false,
                "attribute": "app-title",
                "reflect": false
            }
        };
    }
    static get states() {
        return {
            "deviceSize": {},
            "foregroundColor": {},
            "hasFullWidthSearchBar": {},
            "mobileSearchBarVisible": {},
            "mobileSearchHiddenOnBlur": {},
            "navMenuVisible": {},
            "searchButtonClick": {},
            "searchValue": {}
        };
    }
    static get events() {
        return [{
                "method": "icNavigationMenuClosed",
                "name": "icNavigationMenuClosed",
                "bubbles": true,
                "cancelable": true,
                "composed": true,
                "docs": {
                    "tags": [{
                            "name": "internal",
                            "text": "- Emitted when the menu is closed."
                        }],
                    "text": ""
                },
                "complexType": {
                    "original": "void",
                    "resolved": "void",
                    "references": {}
                }
            }, {
                "method": "icNavigationMenuOpened",
                "name": "icNavigationMenuOpened",
                "bubbles": true,
                "cancelable": true,
                "composed": true,
                "docs": {
                    "tags": [{
                            "name": "internal",
                            "text": "- Emitted when the menu is opened."
                        }],
                    "text": ""
                },
                "complexType": {
                    "original": "void",
                    "resolved": "void",
                    "references": {}
                }
            }, {
                "method": "icTopNavResized",
                "name": "icTopNavResized",
                "bubbles": true,
                "cancelable": true,
                "composed": true,
                "docs": {
                    "tags": [],
                    "text": "Emitted when the top navigation is resized."
                },
                "complexType": {
                    "original": "{ size: number }",
                    "resolved": "{ size: number; }",
                    "references": {}
                }
            }];
    }
    static get elementRef() { return "el"; }
    static get watchers() {
        return [{
                "propName": "appTitle",
                "methodName": "watchPropHandler"
            }];
    }
    static get listeners() {
        return [{
                "name": "icNavigationMenuClose",
                "method": "navBarMenuCloseHandler",
                "target": undefined,
                "capture": false,
                "passive": false
            }, {
                "name": "icSearchBarBlur",
                "method": "searchInputBlurHandler",
                "target": undefined,
                "capture": false,
                "passive": false
            }, {
                "name": "icChange",
                "method": "searchValueChangeHandler",
                "target": undefined,
                "capture": false,
                "passive": false
            }, {
                "name": "brandChange",
                "method": "brandChangeHandler",
                "target": "document",
                "capture": false,
                "passive": false
            }];
    }
}
//# sourceMappingURL=ic-top-navigation.js.map
