import { h } from "@stencil/core";
import { BEM } from "../bem";
export class DropdownFormSubmitUtil {
    connectedCallback(component) {
        this.component = component;
        this.component.initialValue = this.component.value;
    }
    componentDidRender() {
        if (this.component.selectEl) {
            const options = this.component.selectEl.querySelectorAll('option');
            options.forEach(option => {
                if (this.component.rawValue.includes(option.value)) {
                    option.selected = true;
                }
            });
        }
    }
    // @Listen('reset', { capture: true, target: 'document' })
    handle(ev) {
        const formElement = ev.target;
        if (formElement === null || formElement === void 0 ? void 0 : formElement.contains(this.component.el)) {
            if (this.resetHandlerTimer) {
                clearTimeout(this.resetHandlerTimer);
            }
            this.resetHandlerTimer = setTimeout(() => {
                const newRawValue = this.component.valueUtil.parseValueString(this.component.initialValue);
                this.component.valueUtil.updateRawValueBySelection(newRawValue);
            }, 0);
        }
    }
}
export const DropdownNativeSelect = ({ name, httpFormSubmit, multiple, required, disabled, rawValue, refSelectEl, }) => {
    const block = BEM.block('dropdown');
    return httpFormSubmit ? (h("select", { class: Object.assign({}, block.element('root').element('select').class()), "aria-hidden": "true", name: name, multiple: multiple, required: required, disabled: disabled, tabindex: -1, ref: refSelectEl }, rawValue.map((value) => (h("option", { key: value, value: value, selected: true }, value))))) : ('');
};
