import { h, Host } from "@stencil/core";
import { translations } from "./translations";
import state from "./pn-mainnav-store";
import { close, bars } from "pn-design-assets/pn-assets/icons.js";
export class PnMainnav {
    constructor() {
        this.market = 'se';
        this.language = 'sv';
        this.navigationId = 'mainnav';
        this.openMenu = false;
        this.navLabel = '';
    }
    hostElement;
    menuLanguageChange; // Could not use language change since it's a existing window event
    marketChange;
    menuOpenChange;
    componentWillLoad() {
        this.init();
        document.removeEventListener('mousedown', this._onClickOutside.bind(this));
        document.addEventListener('mousedown', this._onClickOutside.bind(this));
    }
    async init() {
        this.setLanguage();
        this.setMarket();
    }
    _onClickOutside(event) {
        const clickedOutside = !this.hostElement.contains(event.target);
        if (clickedOutside) {
            state.openLevel = '';
        }
    }
    setLanguage() {
        this.menuLanguageChange.emit(this.language);
    }
    setMarket() {
        this.marketChange.emit(this.market);
    }
    onLanguageChange(event) {
        if (translations[event.detail]) {
            state.i18n = translations[event.detail];
            if (!this.navLabel) {
                this.navLabel = state.i18n.navLabel;
            }
        }
    }
    setMenuOpenState() {
        state.openMenu = !state.openMenu;
        this.menuOpenChange.emit(state.openMenu);
    }
    onOpenMenuLevelChange(event) {
        state.openLevel = event.detail;
    }
    render() {
        return (h(Host, { key: '96a2de7d4e9c02a53cab673a533f16b31330e3d5' }, h("div", { key: 'bfc843c5e20af6edfba29a21a42fa78f6ae3dcec', class: "mainnav-toggle" }, h("button", { key: 'c830400cb0eb94ec7e43e40faf540dec5cf98cb3', "aria-controls": this.navigationId, "aria-expanded": state.openMenu + '', onClick: this.setMenuOpenState.bind(this) }, state.i18n.mainMenuButton, h("pn-icon", { key: 'fbcffba27203ef72cd790ffc8b956aa92d94ffed', icon: state.openMenu ? close : bars, color: "white" }))), h("nav", { key: 'b4e906e2e031ef66f83a5c2597d3f7cc3b2a2be1', class: "mainnav", "aria-label": this.navLabel, "data-menu-open": state.openMenu + '', "data-menu-currentlevel": state.currentLevel, id: this.navigationId }, h("slot", { key: '2c9742cd1aaf860cc0e51a4d66e049a59976e7c8' }))));
    }
    static get is() { return "pn-mainnav"; }
    static get originalStyleUrls() {
        return {
            "$": ["pn-mainnav.scss"]
        };
    }
    static get styleUrls() {
        return {
            "$": ["pn-mainnav.css"]
        };
    }
    static get properties() {
        return {
            "market": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "Specifies which market we want to fetch navigation for (se,dk,fi,no,com)"
                },
                "attribute": "market",
                "reflect": false,
                "defaultValue": "'se'"
            },
            "language": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "Specifies which language we want to show navigation in (sv,da,fi,no,en)"
                },
                "attribute": "language",
                "reflect": false,
                "defaultValue": "'sv'"
            },
            "navigationId": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "Specifies which endpoint we should read information from"
                },
                "attribute": "navigation-id",
                "reflect": false,
                "defaultValue": "'mainnav'"
            },
            "openMenu": {
                "type": "boolean",
                "mutable": true,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "Specifies which endpoint we should read information from"
                },
                "attribute": "open-menu",
                "reflect": false,
                "defaultValue": "false"
            },
            "navLabel": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "Sets the label of the navigation (Required if multiple nav elements are on a page)"
                },
                "attribute": "nav-label",
                "reflect": false,
                "defaultValue": "''"
            }
        };
    }
    static get events() {
        return [{
                "method": "menuLanguageChange",
                "name": "menuLanguageChange",
                "bubbles": true,
                "cancelable": true,
                "composed": true,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "complexType": {
                    "original": "any",
                    "resolved": "any",
                    "references": {}
                }
            }, {
                "method": "marketChange",
                "name": "marketChange",
                "bubbles": true,
                "cancelable": true,
                "composed": true,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "complexType": {
                    "original": "any",
                    "resolved": "any",
                    "references": {}
                }
            }, {
                "method": "menuOpenChange",
                "name": "menuOpenChange",
                "bubbles": true,
                "cancelable": true,
                "composed": true,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "complexType": {
                    "original": "any",
                    "resolved": "any",
                    "references": {}
                }
            }];
    }
    static get elementRef() { return "hostElement"; }
    static get listeners() {
        return [{
                "name": "language",
                "method": "setLanguage",
                "target": undefined,
                "capture": false,
                "passive": false
            }, {
                "name": "market",
                "method": "setMarket",
                "target": undefined,
                "capture": false,
                "passive": false
            }, {
                "name": "menuLanguageChange",
                "method": "onLanguageChange",
                "target": undefined,
                "capture": false,
                "passive": false
            }, {
                "name": "setmenuopenstate",
                "method": "setMenuOpenState",
                "target": undefined,
                "capture": false,
                "passive": false
            }, {
                "name": "openMenuLevelChange",
                "method": "onOpenMenuLevelChange",
                "target": undefined,
                "capture": false,
                "passive": false
            }];
    }
}
//# sourceMappingURL=pn-mainnav.js.map
