import { h, Host } from "@stencil/core";
import chevronDownSvg from "../../assets/icons/chevron-down.svg";
import { AriaValidationController } from "../../utils/aria/aria-validation-controller";
import { ReactiveControllerHost } from "../../utils/reactive-controller-host";
let selectIdCounter = 0;
export class LmvzSelect extends ReactiveControllerHost {
    el;
    get validationEl() {
        return this.el;
    }
    selectId = `lmvz-select-${selectIdCounter++}`;
    nativeSelectEl;
    constructor() {
        super();
        this.addController(new AriaValidationController(this));
    }
    lmvzChange;
    value;
    label;
    helperText;
    disabled = false;
    required = false;
    name;
    selectedLabel = '';
    get hasValue() {
        return Boolean(this.value);
    }
    componentDidLoad() {
        this.syncSelectedLabel();
        super.componentDidLoad();
    }
    handleValueChange(newValue) {
        if (this.nativeSelectEl && this.nativeSelectEl.value !== (newValue ?? '')) {
            this.nativeSelectEl.value = newValue ?? '';
        }
        this.syncSelectedLabel();
    }
    syncSelectedLabel() {
        if (!this.nativeSelectEl)
            return;
        const idx = this.nativeSelectEl.selectedIndex;
        this.selectedLabel = idx >= 0 ? (this.nativeSelectEl.options[idx]?.text ?? '') : '';
    }
    handleChange = (event) => {
        const select = event.target;
        this.value = select.value;
        this.syncSelectedLabel();
        this.lmvzChange.emit(select.value);
    };
    render() {
        const hasValue = this.hasValue;
        const shouldShowLabel = hasValue;
        return (h(Host, { key: '7d1abb943f79e90451b43c9221801b80a2f61346' }, h("div", { key: 'ded3e45246ab38e89d444c59239cdc63a2c4d4fc', class: "select-wrapper" }, h("label", { key: 'cb68ff79976c2fb55d4cc827f9e90ba2597a8a43', htmlFor: this.selectId, class: shouldShowLabel ? 'floating-label' : 'assistive-label' }, this.label, this.required && shouldShowLabel && h("span", { key: 'ab77eaea1645b95d90f00ffb609bbd7a1704f7bc', "aria-hidden": "true" }, " *")), h("div", { key: '45cee00478a6cc31c10dddf69d8e6687fc8f440d', "aria-hidden": "true" }, h("span", { key: '0c5d425ea8843234aa6abd94a207377e2a675686' }, hasValue ? this.selectedLabel : this.label, this.required && !hasValue && h("span", { key: 'ebef5322371ee0253b50dd801b80cbb6402c067a', "aria-hidden": "true" }, " *")), h("span", { key: 'a12d31dc29563444f728133f181b48914d31705b' }, h("img", { key: 'dd3f175d1ca2b9ccc6c2bfa2075e5da62016a896', src: chevronDownSvg, alt: "" }))), h("select", { key: 'a196f3b824177d1b45971c38341bf6a2939dda82', id: this.selectId, ref: (el) => (this.nativeSelectEl = el), name: this.name, disabled: this.disabled, required: this.required, "aria-label": this.label, onChange: this.handleChange }, !hasValue && h("option", { key: '536cc559def0e9ffa4b2150693ece9a597c238d1', value: "", disabled: true, selected: true, hidden: true }), h("slot", { key: 'ad9fed96b9f8c1d8257511bb1d5ab5ee756973ce' }))), this.helperText && h("div", { key: '4723b44d781c900be5aae7ece2a0be04b6c744b9', role: "status" }, this.helperText)));
    }
    static get is() { return "lmvz-select"; }
    static get encapsulation() { return "scoped"; }
    static get originalStyleUrls() {
        return {
            "$": ["./lmvz-select.css"]
        };
    }
    static get styleUrls() {
        return {
            "$": ["lmvz-select.css"]
        };
    }
    static get properties() {
        return {
            "value": {
                "type": "string",
                "mutable": true,
                "complexType": {
                    "original": "string",
                    "resolved": "string | undefined",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "Currently selected value."
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "value"
            },
            "label": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": true,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "Label text displayed as a placeholder when no value is selected,\nand floated above the trigger when a value is present."
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "label"
            },
            "helperText": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string | undefined",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "Helper text displayed below the select field."
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "helper-text"
            },
            "disabled": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [{
                            "name": "default",
                            "text": "false"
                        }],
                    "text": "Whether the select is disabled."
                },
                "getter": false,
                "setter": false,
                "reflect": true,
                "attribute": "disabled",
                "defaultValue": "false"
            },
            "required": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [{
                            "name": "default",
                            "text": "false"
                        }],
                    "text": "Whether a value is required."
                },
                "getter": false,
                "setter": false,
                "reflect": true,
                "attribute": "required",
                "defaultValue": "false"
            },
            "name": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string | undefined",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "Name attribute passed to the native select for form submission."
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "name"
            }
        };
    }
    static get states() {
        return {
            "selectedLabel": {}
        };
    }
    static get events() {
        return [{
                "method": "lmvzChange",
                "name": "lmvzChange",
                "bubbles": true,
                "cancelable": true,
                "composed": true,
                "docs": {
                    "tags": [],
                    "text": "Emitted when the user selects a new option. Detail contains the new value."
                },
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                }
            }];
    }
    static get elementRef() { return "el"; }
    static get watchers() {
        return [{
                "propName": "value",
                "methodName": "handleValueChange"
            }];
    }
}
