import { Host, h } from "@stencil/core";
import authStore from "../../services/auth";
import userStore from "../../services/user";
import i18next from "i18next";
export class EzpUserMenu {
    constructor() {
        this.backdrop = document.createElement('ezp-backdrop');
        this.links = [
            {
                title: i18next.t('user_menu.account'),
                icon: 'account',
                href: 'https://app.ezeep.com',
            },
            {
                title: i18next.t('user_menu.help'),
                icon: 'help',
                href: 'https://support.ezeep.com',
            },
        ];
        this.themes = ['pink', 'red', 'orange', 'green', 'teal', 'cyan', 'blue', 'violet'];
        this.appearances = [
            { title: i18next.t('user_menu.system'), name: 'system' },
            { title: i18next.t('user_menu.light'), name: 'light' },
            { title: i18next.t('user_menu.dark'), name: 'dark' },
        ];
        this.name = 'John Doe';
        this.open = false;
        this.handleClose = () => {
            this.userMenuClosure.emit();
        };
        this.logOut = () => {
            localStorage.removeItem('properties');
            localStorage.removeItem('refreshToken');
            localStorage.removeItem('access_token');
            localStorage.removeItem('printer');
            localStorage.removeItem('isAuthorized');
            authStore.state.isAuthorized = false;
            this.logoutEmitter.emit();
        };
        this.handleTheme = (theme) => {
            userStore.state.theme = theme;
        };
        this.handleAppearance = (appearance) => {
            userStore.state.appearance = appearance;
        };
    }
    /**
     *
     * Privatre methods
     *
     */
    /**
     *
     * Watchers
     *
     */
    watchOpen() {
        if (this.open) {
            this.backdrop.visible = true;
            this.container.appendChild(this.backdrop);
        }
        else {
            this.backdrop.visible = false;
            this.userMenuClosure.emit();
        }
    }
    /**
     *
     * Render method
     *
     */
    componentWillLoad() {
        this.container = this.component.closest('[data-backdrop-surface]');
        this.backdrop.addEventListener('backdropHideStart', () => {
            this.open = false;
        });
        this.backdrop.addEventListener('backdropHideEnd', () => {
            this.container.removeChild(this.backdrop);
        });
    }
    /**
     *
     * Render method
     *
     */
    render() {
        return (h(Host, { key: '0be3d9326b2fd15cbb61e5b9eae17e0e8c64fefd', class: this.open ? 'is-open' : '' }, h("div", { key: 'a9c3690514cf71adb590395dc4bc71c5a5f35fce', id: "header" }, h("ezp-label", { key: 'cac928c398257f57ace98662049caee2ed992aa6', ellipsis: true, id: "name", weight: "heavy", text: this.name }), h("ezp-icon-button", { key: '5d237bee7dc3d48120a3b042a25bf392965b56a3', id: "close", level: "tertiary", icon: "close", onClick: this.handleClose })), h("div", { key: '2edf3724b7590665fbd4baf27c14fdfe5e623537', id: "links" }, this.links.map((link) => (h("a", { class: "link", href: link.href, target: "_blank", rel: "noopener noreferrer" }, h("ezp-icon", { class: "link__icon", name: link.icon }), h("ezp-label", { text: link.title })))), h("a", { key: '363e6574e75c9cc2aeaa4707f3798e8c2c0f5fd4', class: "link", onClick: this.logOut }, h("ezp-icon", { key: 'b444802cd837572f61dabb28416931498db83f0e', class: "link__icon", name: "logout" }), h("ezp-label", { key: '02958987257786688345e0da79e10f0535b41dc0', text: i18next.t('user_menu.logout') }))), h("div", { key: 'e404081c99dd59cbd3d86a502fa24a76e459718d', id: "theme" }, h("ezp-label", { key: '3a8719b3ca0d6e078fb4add24efea9b28c8e8882', class: "caption", text: `${i18next.t('user_menu.theme')}:`, weight: "heavy" }), h("div", { key: '01c030aa8e66ba2fdfe968588e7c7dd3a6a7fe09', id: "swatches" }, this.themes.map((theme) => (h("button", { class: `swatch swatch--${theme} ${theme === userStore.state.theme ? 'selected' : ''}`, onClick: () => this.handleTheme(theme) }, h("span", { class: "dot" })))))), h("div", { key: '4a04a1ed776aed50e94394ca91aa91c85002d90f', id: "appearance" }, h("ezp-label", { key: '36427d1dea114b47dc6d6b86da80c68388c3b4c2', class: "caption", text: `${i18next.t('user_menu.appearance')}:`, weight: "heavy" }), h("div", { key: '5729ca40b8228644637106f728d90b53da6c09dc', id: "tabs" }, this.appearances.map((appearance) => (h("button", { class: `tab ${appearance.name === userStore.state.appearance ? 'selected' : ''}`, onClick: () => this.handleAppearance(appearance.name) }, h("ezp-icon", { name: appearance.name }), h("ezp-label", { text: appearance.title, level: "tertiary", weight: "strong" }))))))));
    }
    static get is() { return "ezp-user-menu"; }
    static get encapsulation() { return "shadow"; }
    static get originalStyleUrls() {
        return {
            "$": ["ezp-user-menu.scss"]
        };
    }
    static get styleUrls() {
        return {
            "$": ["ezp-user-menu.css"]
        };
    }
    static get properties() {
        return {
            "name": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "name",
                "defaultValue": "'John Doe'"
            },
            "open": {
                "type": "boolean",
                "mutable": true,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "open",
                "defaultValue": "false"
            }
        };
    }
    static get events() {
        return [{
                "method": "userMenuClosure",
                "name": "userMenuClosure",
                "bubbles": true,
                "cancelable": true,
                "composed": true,
                "docs": {
                    "tags": [],
                    "text": "\nEvents"
                },
                "complexType": {
                    "original": "any",
                    "resolved": "any",
                    "references": {}
                }
            }, {
                "method": "logoutEmitter",
                "name": "logoutEmitter",
                "bubbles": true,
                "cancelable": true,
                "composed": true,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "complexType": {
                    "original": "any",
                    "resolved": "any",
                    "references": {}
                }
            }];
    }
    static get elementRef() { return "component"; }
    static get watchers() {
        return [{
                "propName": "open",
                "methodName": "watchOpen"
            }];
    }
}
