import { Host, forceUpdate, h, } from "@stencil/core";
import { IC_INHERITED_ARIA } from "../../utils/constants";
import { getBrandForegroundAppearance, getElementInheritedTheme, inheritAttributes, isSlotUsed, onComponentRequiredPropUndefined, } from "../../utils/helpers";
import { IcBrandForegroundEnum, } from "../../utils/types";
const MUTABLE_ATTRIBUTES = [...IC_INHERITED_ARIA, "title"];
/**
 * @slot icon - Content will be placed to the left of the button label.
 * @slot badge - Badge component overlaying the top right of the button.
 */
export class NavigationButton {
    constructor() {
        this.inheritedAttributes = {};
        this.hostMutationObserver = null;
        /**
         * The display mode.
         */
        this.mode = "navbar";
        /**
         * The parent theme used to inherit external colour tokens such as focus indicator.
         */
        this.parentThemeDark = false;
        /**
         * If `true`, the user can save the linked URL instead of navigating to it.
         */
        this.download = false;
        /**
         * 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";
        /**
         * Triggered when attributes of host element change
         */
        this.hostMutationCallback = (mutationList) => {
            let forceComponentUpdate = false;
            mutationList.forEach(({ attributeName }) => {
                if (attributeName) {
                    const attribute = this.el.getAttribute(attributeName);
                    if (attribute && MUTABLE_ATTRIBUTES.includes(attributeName)) {
                        this.inheritedAttributes[attributeName] = attribute;
                        forceComponentUpdate = true;
                    }
                }
            });
            if (forceComponentUpdate) {
                forceUpdate(this);
            }
        };
    }
    componentWillLoad() {
        this.inheritedAttributes = inheritAttributes(this.el, MUTABLE_ATTRIBUTES);
    }
    componentDidLoad() {
        this.updateTheme();
        onComponentRequiredPropUndefined([{ prop: this.label, propName: "label" }], "Navigation Button");
        this.hostMutationObserver = new MutationObserver(this.hostMutationCallback);
        this.hostMutationObserver.observe(this.el, {
            attributes: true,
        });
    }
    componentWillRender() {
        var _a;
        (_a = this.el
            .querySelector(`[slot="icon"]`)) === null || _a === void 0 ? void 0 : _a.setAttribute("viewBox", "0 0 24 24");
        this.parentThemeChangeHandler();
    }
    disconnectedCallback() {
        var _a;
        (_a = this.hostMutationObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
    }
    navBarMenuOpenHandler() {
        this.mode = "menu";
        this.theme = this.el.parentElement.theme;
    }
    navBarMenuCloseHandler() {
        this.mode = "navbar";
        this.updateTheme();
    }
    brandChangeHandler({ detail: { mode } }) {
        this.updateTheme(mode);
    }
    parentThemeChangeHandler() {
        this.parentThemeDark = getElementInheritedTheme(this.el) === "dark";
    }
    /**
     * Sets focus on the native `button`.
     */
    async setFocus() {
        var _a;
        (_a = this.buttonEl) === null || _a === void 0 ? void 0 : _a.setFocus();
    }
    updateTheme(mode = getBrandForegroundAppearance()) {
        this.theme =
            mode === IcBrandForegroundEnum.Light
                ? IcBrandForegroundEnum.Dark
                : IcBrandForegroundEnum.Light;
    }
    render() {
        const { download, href, inheritedAttributes, label, mode, parentThemeDark, referrerpolicy, rel, target, theme, } = this;
        const isMenuMode = mode === "menu";
        const buttonProps = {
            download,
            href,
            referrerpolicy,
            rel,
            target,
            theme,
        };
        return (h(Host, { key: '538ea349b1f0791b0cd68898380fe4cfd41b5496', class: {
                "in-side-menu": isMenuMode,
                [`ic-theme-${theme}`]: theme !== "inherit",
                dark: parentThemeDark,
            } }, h("ic-button", Object.assign({ key: 'afee63c46529276cd2b77ef6d7c1c69b47a7ae15', ref: (el) => (this.buttonEl = el), class: { "popout-menu-button": isMenuMode }, "aria-label": !isMenuMode ? label : null, disableTooltip: isMenuMode, fullWidth: isMenuMode, monochrome: !isMenuMode, size: isMenuMode ? "medium" : "large", variant: isMenuMode ? "tertiary" : "icon-tertiary" }, buttonProps, inheritedAttributes), isMenuMode ? label : "", h("slot", { key: '8c2a89dfc8f974017cf5384355ce0f881218d038', slot: "left-icon", name: "icon" }), isSlotUsed(this.el, "badge") && h("slot", { key: '7fab4237f3f6745159d584df008e82214ecd3322', name: "badge" }))));
    }
    static get is() { return "ic-navigation-button"; }
    static get encapsulation() { return "shadow"; }
    static get delegatesFocus() { return true; }
    static get originalStyleUrls() {
        return {
            "$": ["ic-navigation-button.css"]
        };
    }
    static get styleUrls() {
        return {
            "$": ["ic-navigation-button.css"]
        };
    }
    static get properties() {
        return {
            "download": {
                "type": "any",
                "mutable": false,
                "complexType": {
                    "original": "string | boolean",
                    "resolved": "boolean | string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "If `true`, the user can save the linked URL instead of navigating to it."
                },
                "getter": false,
                "setter": false,
                "attribute": "download",
                "reflect": false,
                "defaultValue": "false"
            },
            "href": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string | undefined",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "The URL that the link points to. This will render the button as an \"a\" tag."
                },
                "getter": false,
                "setter": false,
                "attribute": "href",
                "reflect": false
            },
            "hreflang": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string | undefined",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "The human language of the linked URL."
                },
                "getter": false,
                "setter": false,
                "attribute": "hreflang",
                "reflect": false
            },
            "label": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": true,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "The label info to display."
                },
                "getter": false,
                "setter": false,
                "attribute": "label",
                "reflect": false
            },
            "referrerpolicy": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "ReferrerPolicy",
                    "resolved": "\"\" | \"no-referrer\" | \"no-referrer-when-downgrade\" | \"origin\" | \"origin-when-cross-origin\" | \"same-origin\" | \"strict-origin\" | \"strict-origin-when-cross-origin\" | \"unsafe-url\" | undefined",
                    "references": {
                        "ReferrerPolicy": {
                            "location": "global",
                            "id": "global::ReferrerPolicy"
                        }
                    }
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "How much of the referrer to send when following the link."
                },
                "getter": false,
                "setter": false,
                "attribute": "referrerpolicy",
                "reflect": false
            },
            "rel": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string | undefined",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "The relationship of the linked URL as space-separated link types."
                },
                "getter": false,
                "setter": false,
                "attribute": "rel",
                "reflect": false
            },
            "target": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string | undefined",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "The place to display the linked URL, as the name for a browsing context (a tab, window, or iframe)."
                },
                "getter": false,
                "setter": false,
                "attribute": "target",
                "reflect": false
            },
            "theme": {
                "type": "string",
                "mutable": true,
                "complexType": {
                    "original": "IcThemeMode",
                    "resolved": "\"dark\" | \"inherit\" | \"light\"",
                    "references": {
                        "IcThemeMode": {
                            "location": "import",
                            "path": "../../utils/types",
                            "id": "src/utils/types.ts::IcThemeMode"
                        }
                    }
                },
                "required": false,
                "optional": false,
                "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\""
            }
        };
    }
    static get states() {
        return {
            "mode": {},
            "parentThemeDark": {}
        };
    }
    static get methods() {
        return {
            "setFocus": {
                "complexType": {
                    "signature": "() => Promise<void>",
                    "parameters": [],
                    "references": {
                        "Promise": {
                            "location": "global",
                            "id": "global::Promise"
                        }
                    },
                    "return": "Promise<void>"
                },
                "docs": {
                    "text": "Sets focus on the native `button`.",
                    "tags": []
                }
            }
        };
    }
    static get elementRef() { return "el"; }
    static get listeners() {
        return [{
                "name": "icNavigationMenuOpened",
                "method": "navBarMenuOpenHandler",
                "target": "document",
                "capture": false,
                "passive": false
            }, {
                "name": "icNavigationMenuClosed",
                "method": "navBarMenuCloseHandler",
                "target": "document",
                "capture": false,
                "passive": false
            }, {
                "name": "brandChange",
                "method": "brandChangeHandler",
                "target": "document",
                "capture": false,
                "passive": false
            }, {
                "name": "icThemeChange",
                "method": "parentThemeChangeHandler",
                "target": "document",
                "capture": false,
                "passive": false
            }];
    }
}
//# sourceMappingURL=ic-navigation-button.js.map
