import { Host, h, } from "@stencil/core";
import { convertToRGBA, getBrandForegroundAppearance, } from "../../utils/helpers";
import { getBrandColorBrightness } from "../../utils/helpers";
import { BLACK_MIN_COLOR_BRIGHTNESS, WHITE_MAX_COLOR_BRIGHTNESS, } from "../../utils/constants";
export class Theme {
    constructor() {
        this.themeClass = "";
        /**
         * The brand colour. Can be a hex value e.g. "#ff0000", RGB e.g. "rgb(255, 0, 0)", or RGBA e.g. "rgba(255, 0, 0, 1)".
         */
        this.brandColor = null;
        /**
         * The theme mode. Can be "dark", "light", or "system". "system" will use the device or browser settings.
         */
        this.theme = "light";
        this.darkModeChangeHandler = () => {
            if (this.theme === "system") {
                this.themeClass =
                    window.matchMedia &&
                        window.matchMedia("(prefers-color-scheme: dark)").matches
                        ? "ic-theme-dark"
                        : "ic-theme-light";
            }
            else {
                this.themeClass = `ic-theme-${this.theme}`;
            }
            this.icThemeChange.emit(this.theme);
        };
        this.checkBrandColorContrast = () => {
            if (getBrandColorBrightness() < BLACK_MIN_COLOR_BRIGHTNESS &&
                getBrandColorBrightness() > WHITE_MAX_COLOR_BRIGHTNESS) {
                console.warn(`The brand colour does not provide enough contrast with either of the ICDS black or white foreground colours. Consider choosing a colour with a different brightness to achieve sufficient colour contrast for good visibility. See https://www.w3.org/TR/AERT/#color-contrast for more information about colour contrast.`);
            }
        };
        this.setBrandColor = () => {
            const colorRGBA = this.brandColor ? convertToRGBA(this.brandColor) : null;
            if (colorRGBA) {
                const { r, g, b, a } = colorRGBA;
                const { style } = document.documentElement;
                style.setProperty("--ic-brand-color-primary-r", `${r}`);
                style.setProperty("--ic-brand-color-primary-g", `${g}`);
                style.setProperty("--ic-brand-color-primary-b", `${b}`);
                style.setProperty("--ic-brand-color-primary-a", `${a}`);
                this.checkBrandColorContrast();
                this.brandChange.emit({
                    mode: getBrandForegroundAppearance(),
                    color: colorRGBA,
                });
            }
        };
    }
    watchBrandColorPropHandler() {
        this.setBrandColor();
    }
    watchThemePropHandler() {
        this.darkModeChangeHandler();
    }
    componentWillLoad() {
        this.darkModeChangeHandler();
        this.setBrandColor();
        window.matchMedia &&
            window
                .matchMedia("(prefers-color-scheme: dark)")
                .addEventListener("change", this.darkModeChangeHandler);
    }
    render() {
        const { themeClass } = this;
        return (h(Host, { key: 'd994b33e982d89fdb62837456a5a1c90471d0a6a', class: themeClass }, h("slot", { key: 'cc67f5ec282adfe4695a7ecf9134fba920a71a7e' })));
    }
    static get is() { return "ic-theme"; }
    static get properties() {
        return {
            "brandColor": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "IcColor | null",
                    "resolved": "`#${string}` | `rgb(${string})` | `rgba(${string})` | null | undefined",
                    "references": {
                        "IcColor": {
                            "location": "import",
                            "path": "../../utils/types",
                            "id": "src/utils/types.ts::IcColor"
                        }
                    }
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "The brand colour. Can be a hex value e.g. \"#ff0000\", RGB e.g. \"rgb(255, 0, 0)\", or RGBA e.g. \"rgba(255, 0, 0, 1)\"."
                },
                "getter": false,
                "setter": false,
                "attribute": "brand-color",
                "reflect": false,
                "defaultValue": "null"
            },
            "theme": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "IcThemeSettings",
                    "resolved": "\"dark\" | \"light\" | \"system\" | undefined",
                    "references": {
                        "IcThemeSettings": {
                            "location": "import",
                            "path": "../../utils/types",
                            "id": "src/utils/types.ts::IcThemeSettings"
                        }
                    }
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "The theme mode. Can be \"dark\", \"light\", or \"system\". \"system\" will use the device or browser settings."
                },
                "getter": false,
                "setter": false,
                "attribute": "theme",
                "reflect": false,
                "defaultValue": "\"light\""
            }
        };
    }
    static get states() {
        return {
            "themeClass": {}
        };
    }
    static get events() {
        return [{
                "method": "brandChange",
                "name": "brandChange",
                "bubbles": true,
                "cancelable": true,
                "composed": true,
                "docs": {
                    "tags": [{
                            "name": "internal",
                            "text": "Emitted when the brand color is changed."
                        }],
                    "text": ""
                },
                "complexType": {
                    "original": "IcBrand",
                    "resolved": "{ mode: IcBrandForeground; color: IcColorRGB; }",
                    "references": {
                        "IcBrand": {
                            "location": "import",
                            "path": "../../utils/types",
                            "id": "src/utils/types.ts::IcBrand"
                        }
                    }
                }
            }, {
                "method": "icThemeChange",
                "name": "icThemeChange",
                "bubbles": true,
                "cancelable": true,
                "composed": true,
                "docs": {
                    "tags": [],
                    "text": "Emitted when the theme is changed."
                },
                "complexType": {
                    "original": "IcThemeSettings",
                    "resolved": "\"dark\" | \"light\" | \"system\"",
                    "references": {
                        "IcThemeSettings": {
                            "location": "import",
                            "path": "../../utils/types",
                            "id": "src/utils/types.ts::IcThemeSettings"
                        }
                    }
                }
            }];
    }
    static get watchers() {
        return [{
                "propName": "brandColor",
                "methodName": "watchBrandColorPropHandler"
            }, {
                "propName": "theme",
                "methodName": "watchThemePropHandler"
            }];
    }
}
//# sourceMappingURL=ic-theme.js.map
