import { h } from "@stencil/core";
import Select from "@ecl/select";
export class EclSelect {
    constructor() {
        this.noScript = false;
        this.disabled = false;
        this.required = false;
        this.invalid = false;
        this.width = 'm';
        this.multiple = false;
        this.hasChanged = false;
        this.isFocused = false;
    }
    getClass() {
        const styleClasses = [
            `ecl-select__container`,
            `ecl-select__container--${this.width}`,
            this.styleClass
        ];
        if (this.disabled) {
            styleClasses.push('ecl-select__container--disabled');
        }
        if (this.invalid) {
            styleClasses.push('ecl-select__container--invalid');
        }
        return styleClasses.join(' ');
    }
    componentWillLoad() {
        var _a;
        this.selectValue = JSON.parse(this.inputValue || '[]');
        this.theme = (_a = document.documentElement.getAttribute('data-ecl-theme')) !== null && _a !== void 0 ? _a : (this.theme || 'ec');
    }
    componentDidLoad() {
        if (!this.noScript && this.multiple) {
            ;
            window.ECL = window.ECL || {};
            ECL.Select = Select;
            const select = new Select(this.el.getElementsByTagName('select')[0]);
            select.init();
        }
        if (this.inputValue) {
            this.handleSelection();
        }
    }
    handleFocus(event) {
        this.inputFocus.emit(event);
        this.isFocused = true;
    }
    handleChange(event) {
        const selectElement = event.target;
        const selectedOptions = Array.from(selectElement.selectedOptions).map(option => option.value);
        this.selectValue = selectedOptions;
        this.inputChange.emit(this.selectValue);
    }
    handleSelection() {
        ;
        const options = this.el.querySelectorAll('option');
        options.forEach((option) => {
            const optionValue = String(option.value);
            option.selected = this.selectValue.some(val => String(val) === optionValue);
        });
    }
    handleBlur(event) {
        this.inputBlur.emit(event);
        this.isFocused = false;
    }
    render() {
        let attributes = {
            class: 'ecl-select',
            id: this.selectId,
            name: this.name,
            required: this.required,
            disabled: this.disabled,
            value: this.inputValue,
        };
        if (this.multiple) {
            attributes['data-ecl-select-multiple'] = true;
            attributes['multiple'] = true;
            attributes['data-ecl-select-default'] = this.multiplePlaceholder;
            attributes['data-ecl-select-no-results'] = this.multipleSearchNoResultsText;
            attributes['data-ecl-select-all'] = this.multipleAllText;
            attributes['data-ecl-select-clear-all'] = this.multipleClearAllText;
            attributes['data-ecl-select-close'] = this.multipleCloseText;
            attributes['data-ecl-select-search'] = this.multipleSearchText;
        }
        if (this.selectId) {
            const group = this.el.closest('.ecl-form-group');
            if (group) {
                const label = group.querySelector('.ecl-form-label');
                if (label) {
                    label.setAttribute('id', `${this.selectId}-label`);
                }
                const helper = group.querySelector('.ecl-help-block');
                if (helper) {
                    helper.setAttribute('id', `${this.selectId}-helper`);
                    attributes['aria-describedby'] = `${this.inputId}-helper`;
                }
            }
        }
        return (h("div", { key: '282cd90ccc88c5cc7db2076e44e9a34d42e34aca', class: this.getClass(), role: "application" }, h("select", Object.assign({ key: '5312331db0a7f4f5046c6ca9b5a82dbc4c446bca' }, attributes, { onFocus: ev => this.handleFocus(ev), onBlur: ev => this.handleBlur(ev), onChange: ev => this.handleChange(ev), onInput: ev => this.handleChange(ev) }), h("slot", { key: '4822c20672a249e95ab17f21fd19c7eac04fb2bb' })), h("div", { key: '173a7d51bf2d94a26fe80f13a9bae4f6bcf393fd', class: "ecl-select__icon" }, h("ecl-button", { key: 'f40b70102ed8f048ab9438f5ec9f8907df4af5ca', styleClass: `sc-ecl-select-${this.theme}`, variant: "tertiary", "hide-label": true }, this.buttonLabel, h("ecl-icon", { key: '3199d0b4df33ac298048d8f2614a0e0825eb51d9', slot: "icon-after", "style-class": `sc-ecl-select-${this.theme}`, icon: "corner-arrow", size: "xs", rotate: "180" })))));
    }
    static get is() { return "ecl-select"; }
    static get originalStyleUrls() {
        return {
            "ec": ["./build/styles/ecl-select-ec.css"],
            "eu": ["./build/styles/ecl-select-eu.css"]
        };
    }
    static get styleUrls() {
        return {
            "ec": ["build/styles/ecl-select-ec.css"],
            "eu": ["build/styles/ecl-select-eu.css"]
        };
    }
    static get properties() {
        return {
            "theme": {
                "type": "string",
                "mutable": true,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "theme"
            },
            "styleClass": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "style-class"
            },
            "noScript": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "no-script",
                "defaultValue": "false"
            },
            "disabled": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "disabled",
                "defaultValue": "false"
            },
            "required": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "required",
                "defaultValue": "false"
            },
            "invalid": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "invalid",
                "defaultValue": "false"
            },
            "width": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "width",
                "defaultValue": "'m'"
            },
            "inputId": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "input-id"
            },
            "selectId": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "select-id"
            },
            "buttonLabel": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "button-label"
            },
            "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"
            },
            "multiple": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "multiple",
                "defaultValue": "false"
            },
            "multiplePlaceholder": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "multiple-placeholder"
            },
            "multipleSearchText": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "multiple-search-text"
            },
            "multipleSearchNoResultsText": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "multiple-search-no-results-text"
            },
            "multipleAllText": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "multiple-all-text"
            },
            "multipleClearAllText": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "multiple-clear-all-text"
            },
            "multipleCloseText": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "multiple-close-text"
            },
            "inputValue": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "input-value"
            },
            "hasChanged": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "has-changed",
                "defaultValue": "false"
            }
        };
    }
    static get states() {
        return {
            "selectValue": {},
            "isFocused": {}
        };
    }
    static get events() {
        return [{
                "method": "inputChange",
                "name": "inputChange",
                "bubbles": true,
                "cancelable": true,
                "composed": true,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "complexType": {
                    "original": "any",
                    "resolved": "any",
                    "references": {}
                }
            }, {
                "method": "inputFocus",
                "name": "inputFocus",
                "bubbles": true,
                "cancelable": true,
                "composed": true,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "complexType": {
                    "original": "FocusEvent",
                    "resolved": "FocusEvent",
                    "references": {
                        "FocusEvent": {
                            "location": "global",
                            "id": "global::FocusEvent"
                        }
                    }
                }
            }, {
                "method": "inputBlur",
                "name": "inputBlur",
                "bubbles": true,
                "cancelable": true,
                "composed": true,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "complexType": {
                    "original": "FocusEvent",
                    "resolved": "FocusEvent",
                    "references": {
                        "FocusEvent": {
                            "location": "global",
                            "id": "global::FocusEvent"
                        }
                    }
                }
            }];
    }
    static get elementRef() { return "el"; }
}
