import { Host, h, } from "@stencil/core";
import closeIcon from "../../assets/close-icon.svg";
import { isSlotUsed, pxToRem, renderDynamicChildSlots, } from "../../utils/helpers";
import { VARIANT_ICONS } from "../../utils/constants";
/**
 * @slot message - Content is placed to the right of the title.
 * @slot action - Content is placed to the right of the message.
 * @slot neutral-icon - A custom neutral icon is placed to the left of the title. This will override the default icon if used.
 */
export class Alert {
    constructor() {
        this.hostMutationObserver = null;
        this.systemThemeObserver = null;
        this.darkMode = false;
        this.alertTitleWrap = false;
        this.visible = true;
        /**
         * If `true`, the alert will have the 'alert' ARIA role and will be announced to screen readers.
         */
        this.announced = true;
        /**
         * If `true`, the alert will have a close icon at the end to dismiss it.
         */
        this.dismissible = false;
        /**
         * The optional title to display at the start of the alert.
         */
        this.heading = "";
        /**
         * If `true`, the default icon for the neutral variant will appear on the left of the alert.
         */
        this.showDefaultIcon = true;
        /**
         * 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";
        /**
         * If `true`, the title and message will appear above and below instead of inline.
         */
        this.titleAbove = false;
        /**
         * The variant of the alert which will be rendered.
         */
        this.variant = "neutral";
        this.dismissAction = () => {
            this.icDismiss.emit();
        };
        this.calculateMinHeight = () => {
            var _a;
            const contentHeight = Number((_a = this.messageEl) === null || _a === void 0 ? void 0 : _a.clientHeight);
            const minHeight = pxToRem(`${(contentHeight > 40 ? contentHeight : 52) + (this.darkMode ? 0 : 4)}`);
            if (this.el.style.getPropertyValue("--ic-alert-min-height") !== minHeight)
                this.el.style.setProperty("--ic-alert-min-height", minHeight);
        };
    }
    themeChangeHandler() {
        if (this.theme !== "inherit")
            this.darkMode = this.theme === "dark";
    }
    disconnectedCallback() {
        var _a, _b;
        (_a = this.hostMutationObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
        (_b = this.systemThemeObserver) === null || _b === void 0 ? void 0 : _b.removeEventListener("change", this.darkModeChangeHandler);
    }
    componentWillLoad() {
        if (!this.el.closest("ic-theme")) {
            this.systemThemeObserver = window.matchMedia("(prefers-color-scheme: dark)");
            this.systemThemeObserver.addEventListener("change", this.darkModeChangeHandler);
            this.darkMode = this.systemThemeObserver.matches;
        }
        this.themeChangeHandler();
    }
    componentDidLoad() {
        var _a;
        if (Number((_a = this.titleEl) === null || _a === void 0 ? void 0 : _a.clientHeight) > 24)
            this.alertTitleWrap = true;
        this.hostMutationObserver = new MutationObserver((mutationList) => renderDynamicChildSlots(mutationList, "action", this));
        this.hostMutationObserver.observe(this.el, {
            childList: true,
        });
        this.calculateMinHeight();
    }
    componentDidUpdate() {
        this.calculateMinHeight();
    }
    handleClick() {
        this.visible = !this.visible;
    }
    darkModeChangeHandler(ev) {
        this.darkMode = "detail" in ev ? ev.detail === "dark" : ev.matches;
        this.calculateMinHeight();
    }
    render() {
        const { variant, heading, message, titleAbove, dismissible, announced, visible, showDefaultIcon, theme, alertTitleWrap, dismissAction, } = this;
        const Icon = () => {
            const iconClass = {
                "alert-icon": true,
                "svg-container": true,
                [`icon-${variant}`]: true,
            };
            if (variant === "neutral") {
                if (isSlotUsed(this.el, "neutral-icon")) {
                    return (h("div", { class: iconClass }, h("slot", { name: "neutral-icon" })));
                }
                else if (!showDefaultIcon) {
                    return h("div", { class: "icon-placeholder" });
                }
            }
            return (h("span", { class: iconClass, innerHTML: VARIANT_ICONS[variant].icon }));
        };
        return (visible && (h(Host, { role: announced ? "alert" : null, class: {
                [`ic-theme-${theme}`]: theme !== "inherit",
            } }, h("div", { class: { container: true, [`container-${variant}`]: true } }, h("div", { class: "alert-icon-container" }, h("div", { class: { divider: true, [`divider-${variant}`]: true } }), h(Icon, null)), h("div", { class: "alert-content" }, h("div", { class: {
                "alert-message": true,
                "alert-message-title-above": titleAbove || alertTitleWrap,
            }, ref: (el) => (this.messageEl = el) }, heading && (h("ic-typography", { class: {
                "alert-title": true,
                "alert-title-above": titleAbove || alertTitleWrap,
            }, variant: "subtitle-large", ref: (el) => (this.titleEl = el) }, h("p", null, heading))), h("slot", { name: "message" }, h("ic-typography", { variant: "body" }, message))), isSlotUsed(this.el, "action") && (h("div", { class: "alert-action-container" }, h("slot", { name: "action" })))), h("div", { class: "dismiss-icon-container" }, dismissible && (h("ic-button", { class: { "svg-container": true, "dismiss-icon": true }, innerHTML: closeIcon, onClick: dismissAction, variant: "icon", theme: "dark", title: "Dismiss" })))))));
    }
    static get is() { return "ic-alert"; }
    static get encapsulation() { return "shadow"; }
    static get originalStyleUrls() {
        return {
            "$": ["ic-alert.css"]
        };
    }
    static get styleUrls() {
        return {
            "$": ["ic-alert.css"]
        };
    }
    static get properties() {
        return {
            "announced": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "If `true`, the alert will have the 'alert' ARIA role and will be announced to screen readers."
                },
                "getter": false,
                "setter": false,
                "attribute": "announced",
                "reflect": false,
                "defaultValue": "true"
            },
            "dismissible": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "If `true`, the alert will have a close icon at the end to dismiss it."
                },
                "getter": false,
                "setter": false,
                "attribute": "dismissible",
                "reflect": false,
                "defaultValue": "false"
            },
            "heading": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "The optional title to display at the start of the alert."
                },
                "getter": false,
                "setter": false,
                "attribute": "heading",
                "reflect": false,
                "defaultValue": "\"\""
            },
            "message": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string | undefined",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "The main body message of the alert."
                },
                "getter": false,
                "setter": false,
                "attribute": "message",
                "reflect": false
            },
            "showDefaultIcon": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "If `true`, the default icon for the neutral variant will appear on the left of the alert."
                },
                "getter": false,
                "setter": false,
                "attribute": "show-default-icon",
                "reflect": false,
                "defaultValue": "true"
            },
            "theme": {
                "type": "string",
                "mutable": false,
                "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\""
            },
            "titleAbove": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "If `true`, the title and message will appear above and below instead of inline."
                },
                "getter": false,
                "setter": false,
                "attribute": "title-above",
                "reflect": false,
                "defaultValue": "false"
            },
            "variant": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "IcStatusVariants",
                    "resolved": "\"error\" | \"info\" | \"neutral\" | \"success\" | \"warning\"",
                    "references": {
                        "IcStatusVariants": {
                            "location": "import",
                            "path": "../../utils/types",
                            "id": "src/utils/types.ts::IcStatusVariants"
                        }
                    }
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "The variant of the alert which will be rendered."
                },
                "getter": false,
                "setter": false,
                "attribute": "variant",
                "reflect": false,
                "defaultValue": "\"neutral\""
            }
        };
    }
    static get states() {
        return {
            "alertTitleWrap": {},
            "visible": {}
        };
    }
    static get events() {
        return [{
                "method": "icDismiss",
                "name": "icDismiss",
                "bubbles": true,
                "cancelable": true,
                "composed": true,
                "docs": {
                    "tags": [],
                    "text": "Is emitted when the user dismisses the alert."
                },
                "complexType": {
                    "original": "void",
                    "resolved": "void",
                    "references": {}
                }
            }];
    }
    static get elementRef() { return "el"; }
    static get watchers() {
        return [{
                "propName": "theme",
                "methodName": "themeChangeHandler"
            }];
    }
    static get listeners() {
        return [{
                "name": "icDismiss",
                "method": "handleClick",
                "target": undefined,
                "capture": true,
                "passive": false
            }, {
                "name": "icThemeChange",
                "method": "darkModeChangeHandler",
                "target": "document",
                "capture": true,
                "passive": false
            }];
    }
}
//# sourceMappingURL=ic-alert.js.map
