import { globe } from "pn-design-assets/pn-assets/icons.js";
import { h, Host, } from "@stencil/core";
import { translations } from "./translations";
export class PnlanguageSelector {
    constructor() {
        this.value = '';
        this.appearance = 'light';
        this.selectedLanguageName = '';
        this.options = [];
        this.i18n = undefined;
    }
    hostElement;
    // Events
    setLanguage;
    componentWillLoad() {
        this.setInitialSelectedLanguageName();
        this.setTranslations();
    }
    componentDidLoad() {
        this.initialize();
    }
    initialize() {
        this.setSelectedLanguageName();
        this.addEventBindingsToOptions();
    }
    setInitialSelectedLanguageName() {
        if (!window.Intl || !this.value) {
            return;
        }
        const langs = new Intl.DisplayNames([this.value], { type: 'language' });
        if (!langs) {
            return;
        }
        const languageName = langs.of(this.value);
        if (!languageName) {
            return;
        }
        this.selectedLanguageName = languageName.charAt(0).toUpperCase() + languageName.slice(1);
    }
    addEventBindingsToOptions() {
        const options = [].slice.apply(this.hostElement.querySelectorAll('pn-language-selector-option'));
        options.map((option) => {
            option.removeEventListener('setCurrentLanguage', (event) => {
                this.onSetCurrentLanguage(event.detail);
            });
            // Bind event listener for when a user change language
            option.addEventListener('setCurrentLanguage', (event) => {
                this.onSetCurrentLanguage(event.detail);
            });
        });
    }
    setSelectedLanguageName() {
        const options = [].slice.apply(this.hostElement.querySelectorAll('pn-language-selector-option'));
        options.map((option) => {
            // Set current label of language selector
            if (option.getAttribute('code') == this.value) {
                //  || option.getAttribute("selected") == "true"
                this.selectedLanguageName = option.getAttribute('name');
            }
        });
    }
    onSetCurrentLanguage(option) {
        this.value = option.code;
        this.selectedLanguageName = option.name;
        this.setLanguage.emit(this.value);
    }
    setTranslations() {
        if (translations[this.value]) {
            this.i18n = translations[this.value];
        }
    }
    onValueChange() {
        const components = this.hostElement.querySelectorAll('pn-language-selector-option') ?? [];
        components.forEach(component => {
            // Pass values as props into slotted components
            // component.setAttribute("current-language", this.value);
            const isSelected = (component.getAttribute('code') === this.value) + '';
            if (component.getAttribute('selected') + '' !== isSelected) {
                component.setAttribute('selected', isSelected);
            }
        });
    }
    render() {
        return (h(Host, { key: '30445c2ff5bc5cbf527afb34675dd448715486bc', value: this.value }, h("pn-button-dropdown", { key: '380b212f804b6a2fd37e4c734be306907f42f84f', label: this.selectedLanguageName, icon: globe, appearance: this.appearance, variant: "borderless", "aria-label": this.i18n.heading }, h("div", { key: '13b1715497c0031cb3465bb04364f20ad0794b6a', class: "languageselector-nav" }, h("strong", { key: '8a1492197591798fc7e51399a898ef618296ff4a', class: "languageselector-title" }, this.i18n.heading), h("div", { key: 'd6a6bd4dc29bfd413febce5e5bdefa136b02a495', class: "languageselector-list", role: "list" }, h("slot", { key: '5bbb0a7d8c5ff178663bf578d0ee8fa10c456819' }))))));
    }
    static get is() { return "pn-language-selector"; }
    static get originalStyleUrls() {
        return {
            "$": ["pn-language-selector.scss"]
        };
    }
    static get styleUrls() {
        return {
            "$": ["pn-language-selector.css"]
        };
    }
    static get properties() {
        return {
            "value": {
                "type": "string",
                "mutable": true,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "attribute": "value",
                "reflect": true,
                "defaultValue": "''"
            },
            "appearance": {
                "type": "string",
                "mutable": true,
                "complexType": {
                    "original": "'light' | 'dark'",
                    "resolved": "\"dark\" | \"light\"",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "attribute": "appearance",
                "reflect": true,
                "defaultValue": "'light'"
            }
        };
    }
    static get states() {
        return {
            "selectedLanguageName": {},
            "options": {},
            "i18n": {}
        };
    }
    static get events() {
        return [{
                "method": "setLanguage",
                "name": "setLanguage",
                "bubbles": true,
                "cancelable": true,
                "composed": true,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "complexType": {
                    "original": "any",
                    "resolved": "any",
                    "references": {}
                }
            }];
    }
    static get elementRef() { return "hostElement"; }
    static get watchers() {
        return [{
                "propName": "value",
                "methodName": "setSelectedLanguageName"
            }, {
                "propName": "value",
                "methodName": "setTranslations"
            }, {
                "propName": "value",
                "methodName": "onValueChange"
            }];
    }
}
//# sourceMappingURL=pn-language-selector.js.map
