import { h, Host } from "@stencil/core";
export class SpwHeaderLang {
    constructor() {
        this.activeLang = '';
        this.options = [];
        this.handleButtonKeyDown = (event) => {
            var _a;
            if (event.key === ' ' || event.key === 'Enter') {
                event.preventDefault();
                (_a = this.selectEl) === null || _a === void 0 ? void 0 : _a.click();
            }
        };
        this.handleButtonClick = () => {
            var _a;
            (_a = this.selectEl) === null || _a === void 0 ? void 0 : _a.click();
        };
        this.handleOptionClick = (option) => {
            this.setActiveLangAndRedirect(option);
        };
    }
    componentDidLoad() {
        this.moveOptionsToSelect();
    }
    moveOptionsToSelect() {
        var _a;
        const lightDomOptions = Array.from(this.el.querySelectorAll('option'));
        this.options = lightDomOptions;
        const selectedOption = lightDomOptions.find(opt => opt.hasAttribute('selected') || opt.selected);
        lightDomOptions.forEach(option => {
            this.selectEl.appendChild(option);
        });
        if (selectedOption) {
            this.activeLang = ((_a = selectedOption.textContent) === null || _a === void 0 ? void 0 : _a.trim()) || '';
        }
    }
    handleChange(event) {
        const target = event.target;
        const selectedOption = target.selectedOptions[0];
        this.setActiveLangAndRedirect(selectedOption);
    }
    setActiveLangAndRedirect(option) {
        var _a;
        this.activeLang = ((_a = option === null || option === void 0 ? void 0 : option.textContent) === null || _a === void 0 ? void 0 : _a.trim()) || '';
        const value = (option === null || option === void 0 ? void 0 : option.getAttribute('value')) || '';
        this.langChange.emit(value);
        const link = option === null || option === void 0 ? void 0 : option.getAttribute('data-link');
        if (link && link !== '#') {
            window.location.href = link;
        }
    }
    render() {
        return (h(Host, { key: '06242ab720bf430b9fc2b2f3dee6792465511ab9' }, h("div", { key: 'bb3a9606231b8bf69b6e19346223b52044bfb280', class: "spw-header-lang" }, h("spw-button", { key: '02c5b7db54c98c34a5a67c2ed50a42b43bb43861', variant: "tertiary", surface: "light", icon: "fa-chevron-down", class: "spw-header-lang__active-lang", onKeyDown: this.handleButtonKeyDown, onClick: this.handleButtonClick }, this.activeLang), h("select", { key: '247fe0ac8ac870da425f52e41f239921529fdf70', "aria-label": this.accAriaLabel || 'Lang', class: "spw-header-lang__select", onChange: e => this.handleChange(e), ref: el => (this.selectEl = el), tabIndex: -1 }), h("ul", { key: 'a5b041a4630a55593243ff102ee0738eb8efb2ea', class: "spw-header-lang__options" }, this.options.map(option => {
            var _a;
            const label = ((_a = option.textContent) === null || _a === void 0 ? void 0 : _a.trim()) || '';
            const value = option.getAttribute('value') || '';
            const isSelected = label === this.activeLang;
            return (h("li", { class: { 'spw-header-lang__option': true, 'spw-header-lang__option--selected': isSelected }, "data-value": value, onClick: () => this.handleOptionClick(option) }, label));
        })))));
    }
    static get is() { return "spw-header-lang"; }
    static get encapsulation() { return "shadow"; }
    static get originalStyleUrls() {
        return {
            "$": ["spw-header-lang.scss"]
        };
    }
    static get styleUrls() {
        return {
            "$": ["spw-header-lang.css"]
        };
    }
    static get properties() {
        return {
            "accAriaLabel": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "Remplit l'attribut aria-label, utilis\u00E9 \u00E0 des fins d'accessibilit\u00E9"
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "acc-aria-label"
            }
        };
    }
    static get states() {
        return {
            "activeLang": {},
            "options": {}
        };
    }
    static get events() {
        return [{
                "method": "langChange",
                "name": "langChange",
                "bubbles": true,
                "cancelable": true,
                "composed": true,
                "docs": {
                    "tags": [],
                    "text": "\u00C9v\u00E9nement \u00E9mis lors du changement de langue"
                },
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                }
            }];
    }
    static get elementRef() { return "el"; }
}
