import { Host, h } from "@stencil/core";
import { messageId } from "../../utils/form";
import { PdsLabel } from "../_internal/pds-label/pds-label";
export class PdsSelect {
    constructor() {
        /**
         * Emits an event on input change.
        */
        this.onSelectUpdate = (e) => {
            const target = e.target;
            const values = Array.from(target.options)
                .filter((option) => (option.selected))
                .map((option) => (option.value));
            if (values.length === 1 && !this.multiple) {
                this.value = values[0];
            }
            else {
                this.value = values;
            }
            this.pdsSelectChange.emit(e);
        };
        /**
         * Handles the change event for the slot element.
         * This method is triggered when the slot content changes.
         * It updates the inner HTML of the select element by cloning and appending
         * the assigned <option> elements from the slot.
         */
        this.handleSlotChange = () => {
            const slot = this.slotContainer.querySelector('slot');
            this.selectEl.innerHTML = '';
            const assignedElements = slot.assignedElements({ flatten: true });
            assignedElements.forEach((item) => {
                if (['OPTION', 'OPTGROUP'].includes(item.tagName)) {
                    const clonedItem = item.cloneNode(true);
                    if (clonedItem.tagName === 'OPTION' && clonedItem.value === this.value) {
                        clonedItem.selected = true;
                    }
                    this.selectEl.appendChild(clonedItem);
                }
            });
            this.updateSelectedOption();
        };
        this.autocomplete = undefined;
        this.componentId = undefined;
        this.disabled = false;
        this.errorMessage = undefined;
        this.helperMessage = undefined;
        this.invalid = undefined;
        this.label = undefined;
        this.multiple = false;
        this.name = undefined;
        this.required = false;
        this.value = undefined;
    }
    /**
     * Handles the change in the value of the select component.
     * This method is called whenever the value of the select component changes.
     * It updates the selected option accordingly.
     */
    valueChanged() {
        this.updateSelectedOption();
    }
    componentWillLoad() {
        this.updateSelectedOption();
    }
    /**
     * Updates the selected option in the select element based on the current value.
     *
     * This method iterates through all the options of the select element and sets the
     * 'selected' attribute on the option that matches the current value. If an option
     * does not match the current value, the 'selected' attribute is removed.
     *
     * @private
     * @returns {void}
     */
    updateSelectedOption() {
        if (this.selectEl) {
            const options = this.selectEl.options;
            // Update the selected attribute for all options.
            Array.from(options).map((option) => {
                if (Array.isArray(this.value)) {
                    option.selected = this.value.includes(option.value);
                }
                else {
                    option.selected = this.value === option.value;
                }
            });
        }
        ;
    }
    getHelperMessage() {
        return this.helperMessage && (h("p", { class: "pds-select__helper-message", id: messageId(this.componentId, 'helper') }, this.helperMessage));
    }
    getErrorMessage() {
        return this.errorMessage && (h("p", { class: "pds-select__error-message", id: messageId(this.componentId, 'error'), "aria-live": "assertive" }, h("pds-icon", { name: "danger", size: "small" }), this.errorMessage));
    }
    renderMessages() {
        if (!this.helperMessage && !this.errorMessage)
            return null;
        return (h("div", { class: "pds-select__message" }, this.getHelperMessage(), this.getErrorMessage()));
    }
    classNames() {
        const classNames = [];
        if (this.invalid) {
            classNames.push('is-invalid');
        }
        if (this.disabled) {
            classNames.push('is-disabled');
        }
        return classNames.join('  ');
    }
    render() {
        return (h(Host, { key: 'f0baf957ee67ee9171a41fc4171e548b94d5c22c', "aria-disabled": this.disabled ? 'true' : null, class: this.classNames() }, h("div", { key: '88ef7c54afc654133d613c91c4bb3fbfe4a944b3', class: "pds-select" }, h(PdsLabel, { key: '7723f468412f6567e0d4fd236807e1ba2fdea16a', htmlFor: this.componentId, text: this.label }), h("select", { key: '1bdb1e22360972aa6cb77902d1288abfcc9dbf07', autocomplete: this.autocomplete || undefined, class: "pds-select__field", disabled: this.disabled, id: this.componentId, multiple: this.multiple, name: this.name, onChange: this.onSelectUpdate, required: this.required, ref: (el) => (this.selectEl = el) }), h("div", { key: 'ddbac1f772b335688d7eb219a7ea3a9ab4a3192a', "aria-hidden": "true", class: "hidden", ref: (el) => (this.slotContainer = el) }, h("slot", { key: 'aa6093fd8833fdf4860dd8127c32f95405679a11', onSlotchange: this.handleSlotChange })), this.renderMessages(), !this.multiple && h("pds-icon", { key: 'de8dc37035701942d8b2bcf56b40edf2f6de20df', class: "pds-select__select-icon", name: "enlarge" }))));
    }
    static get is() { return "pds-select"; }
    static get encapsulation() { return "shadow"; }
    static get originalStyleUrls() {
        return {
            "$": ["pds-select.scss"]
        };
    }
    static get styleUrls() {
        return {
            "$": ["pds-select.css"]
        };
    }
    static get properties() {
        return {
            "autocomplete": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "Specifies if and how the browser provides `autocomplete` assistance for the field."
                },
                "attribute": "autocomplete",
                "reflect": false
            },
            "componentId": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": true,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "A unique identifier used for the underlying component `id` attribute."
                },
                "attribute": "component-id",
                "reflect": false
            },
            "disabled": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [{
                            "name": "defaultValue",
                            "text": "false"
                        }],
                    "text": "Indicates whether or not the select field is disabled."
                },
                "attribute": "disabled",
                "reflect": false,
                "defaultValue": "false"
            },
            "errorMessage": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "Displays error message text describing an invalid state."
                },
                "attribute": "error-message",
                "reflect": false
            },
            "helperMessage": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "Displays helper message text below select."
                },
                "attribute": "helper-message",
                "reflect": false
            },
            "invalid": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "Determines whether or not the select is invalid."
                },
                "attribute": "invalid",
                "reflect": false
            },
            "label": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "Text to be displayed as the select label."
                },
                "attribute": "label",
                "reflect": false
            },
            "multiple": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [{
                            "name": "defaultValue",
                            "text": "false"
                        }],
                    "text": "Indicates whether multiple options can be selected."
                },
                "attribute": "multiple",
                "reflect": false,
                "defaultValue": "false"
            },
            "name": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": true,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "Specifies the name. Submitted with the form name/value pair."
                },
                "attribute": "name",
                "reflect": false
            },
            "required": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [{
                            "name": "defaultValue",
                            "text": "false"
                        }],
                    "text": "Indicates whether or not the select field is required."
                },
                "attribute": "required",
                "reflect": false,
                "defaultValue": "false"
            },
            "value": {
                "type": "string",
                "mutable": true,
                "complexType": {
                    "original": "string | string[]",
                    "resolved": "string | string[]",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "The value(s) of the selected option(s)."
                },
                "attribute": "value",
                "reflect": false
            }
        };
    }
    static get events() {
        return [{
                "method": "pdsSelectChange",
                "name": "pdsSelectChange",
                "bubbles": true,
                "cancelable": true,
                "composed": true,
                "docs": {
                    "tags": [],
                    "text": "Emitted when a keyboard input occurs."
                },
                "complexType": {
                    "original": "InputEvent",
                    "resolved": "InputEvent",
                    "references": {
                        "InputEvent": {
                            "location": "global",
                            "id": "global::InputEvent"
                        }
                    }
                }
            }];
    }
    static get watchers() {
        return [{
                "propName": "value",
                "methodName": "valueChanged"
            }];
    }
}
//# sourceMappingURL=pds-select.js.map
