import { h, Host } from "@stencil/core";
import { govHost } from "../../helpers/Dom/template";
import { ATTRIBUTE_THEME_NAME, ThemeSwitchClass, ThemeSwitchSizes } from "./constants";
import { isWindow } from "../../helpers/Dom/win";
import { ThemeList } from "./gov-theme-switch.types";
import { validateProp } from "../../helpers/Validate/props";
import { getCookie, setCookie } from "../../helpers/Dom/document";
export class GovThemeSwitch {
    constructor() {
        /**
         * Switch's size.
         */
        this.size = "m";
        /**
         * Display switch label
         */
        this.displayLabel = false;
        /**
         * Label in light mode
         */
        this.ariaLabelLight = "Přepnout na tmavý mód";
        /**
         * Label in dark mode
         */
        this.ariaLabelDark = "Přepnout na světlý mód";
        /**
         * Label in light mode
         */
        this.labelLight = "Světlý mód";
        /**
         * Label in dark mode
         */
        this.labelDark = "Tmavý mód";
        this.theme = ThemeList.auto;
        this.setThemeState = (state) => {
            this.theme = state;
            this.govChange.emit({
                component: ThemeSwitchClass.root,
                state: this.theme,
                ref: this.host
            });
        };
        this.h = govHost(this.host);
    }
    validateSize(newValue) {
        validateProp(ThemeSwitchSizes, newValue, ThemeSwitchClass.root);
    }
    watchTheme(newValue) {
        this.htmlElement.setAttribute(ATTRIBUTE_THEME_NAME, newValue);
        this.htmlElement.classList.remove(...Object.keys(ThemeList));
        this.htmlElement.classList.add(newValue);
        setCookie(ATTRIBUTE_THEME_NAME, newValue);
    }
    get storageValue() {
        return getCookie(ATTRIBUTE_THEME_NAME);
    }
    get htmlElement() {
        return document.documentElement;
    }
    get isSystemPrefersColorDark() {
        return isWindow && window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches;
    }
    componentWillLoad() {
        this.initDefaultState();
        this.validateSize(this.size);
    }
    initDefaultState() {
        const options = Object.keys(ThemeList);
        let currentState = this.storageValue;
        const htmlState = this.htmlElement.getAttribute(ATTRIBUTE_THEME_NAME);
        if (currentState && options.includes(currentState)) {
            this.theme = currentState;
        }
        else if (htmlState && options.includes(htmlState)) {
            this.theme = htmlState;
        }
        else {
            this.theme = ThemeList.auto;
        }
    }
    render() {
        let isDark = this.theme === ThemeList.dark;
        if (this.theme === ThemeList.auto) {
            isDark = this.isSystemPrefersColorDark;
        }
        return (h(Host, { key: '77b26165b2a824ff9649ac9c28d7b300cdb76280', class: this.h.classes(ThemeSwitchClass.root), theme: isDark ? ThemeList.dark : ThemeList.light, size: this.size }, h("button", { key: 'c46058c2a0e797fef9c7e1ab4975ff379bbc3fb4', onClick: () => this.setThemeState(isDark ? ThemeList.light : ThemeList.dark), "aria-current": this.theme, "aria-label": isDark ? this.ariaLabelDark : this.ariaLabelLight }, h("span", { key: 'c1d8824467dc7bfa5d23f1f99db686e91e93087b' }, h("span", { key: '62da0a9fecc5fc713b98ac9e4e728e3e19b9aa67', class: ThemeSwitchClass.indicator }, ThemeList.light && h("gov-icon", { key: '7c9dd1cf819afbd7f63609916d6c845c2236fbca', name: "sun", class: ThemeSwitchClass.iconLight, type: "components" }), ThemeList.dark && h("gov-icon", { key: '3f1acf71f8afb5ca893c460b7d0b6e49fe6f5c2d', name: "moon", class: ThemeSwitchClass.iconDark, type: "components" })), this.displayLabel ? (h("span", { class: ThemeSwitchClass.label }, isDark ? this.labelDark : this.labelLight)) : null))));
    }
    static get is() { return "gov-theme-switch"; }
    static get properties() {
        return {
            "size": {
                "type": "string",
                "attribute": "size",
                "mutable": false,
                "complexType": {
                    "original": "ThemeSwitchSizesType",
                    "resolved": "\"l\" | \"m\" | \"s\" | \"xl\" | \"xs\"",
                    "references": {
                        "ThemeSwitchSizesType": {
                            "location": "import",
                            "path": "./constants",
                            "id": "../../../packages/core/src/components/gov-theme-switch/constants.ts::ThemeSwitchSizesType"
                        }
                    }
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "Switch's size."
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "defaultValue": "\"m\""
            },
            "displayLabel": {
                "type": "boolean",
                "attribute": "display-label",
                "mutable": false,
                "complexType": {
                    "original": "false",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "Display switch label"
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "defaultValue": "false"
            },
            "ariaLabelLight": {
                "type": "string",
                "attribute": "aria-label-light",
                "mutable": false,
                "complexType": {
                    "original": "\"P\u0159epnout na tmav\u00FD m\u00F3d\"",
                    "resolved": "\"P\u0159epnout na tmav\u00FD m\u00F3d\"",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "Label in light mode"
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "defaultValue": "\"P\u0159epnout na tmav\u00FD m\u00F3d\""
            },
            "ariaLabelDark": {
                "type": "string",
                "attribute": "aria-label-dark",
                "mutable": false,
                "complexType": {
                    "original": "\"P\u0159epnout na sv\u011Btl\u00FD m\u00F3d\"",
                    "resolved": "\"P\u0159epnout na sv\u011Btl\u00FD m\u00F3d\"",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "Label in dark mode"
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "defaultValue": "\"P\u0159epnout na sv\u011Btl\u00FD m\u00F3d\""
            },
            "labelLight": {
                "type": "string",
                "attribute": "label-light",
                "mutable": false,
                "complexType": {
                    "original": "\"Sv\u011Btl\u00FD m\u00F3d\"",
                    "resolved": "\"Sv\u011Btl\u00FD m\u00F3d\"",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "Label in light mode"
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "defaultValue": "\"Sv\u011Btl\u00FD m\u00F3d\""
            },
            "labelDark": {
                "type": "string",
                "attribute": "label-dark",
                "mutable": false,
                "complexType": {
                    "original": "\"Tmav\u00FD m\u00F3d\"",
                    "resolved": "\"Tmav\u00FD m\u00F3d\"",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "Label in dark mode"
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "defaultValue": "\"Tmav\u00FD m\u00F3d\""
            }
        };
    }
    static get states() {
        return {
            "theme": {}
        };
    }
    static get events() {
        return [{
                "method": "govChange",
                "name": "gov-change",
                "bubbles": true,
                "cancelable": true,
                "composed": true,
                "docs": {
                    "tags": [],
                    "text": "Called when the theme is changed by the user"
                },
                "complexType": {
                    "original": "ThemeSwitchEvent",
                    "resolved": "ThemeSwitchEvent",
                    "references": {
                        "ThemeSwitchEvent": {
                            "location": "import",
                            "path": "./gov-theme-switch.types",
                            "id": "../../../packages/core/src/components/gov-theme-switch/gov-theme-switch.types.ts::ThemeSwitchEvent"
                        }
                    }
                }
            }];
    }
    static get elementRef() { return "host"; }
    static get watchers() {
        return [{
                "propName": "size",
                "methodName": "validateSize"
            }, {
                "propName": "theme",
                "methodName": "watchTheme"
            }];
    }
}
//# sourceMappingURL=gov-theme-switch.js.map
