"use strict";
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
const makeup_floating_label_1 = __importDefault(require("makeup-floating-label"));
class Select {
    get selectId() {
        return this.input.id || this.getElId("select");
    }
    handleChange(event) {
        const { selectedIndex } = event.target;
        const el = this.getEls("option")[selectedIndex];
        const option = [...(this.input.option || [])][selectedIndex];
        this.state.selectedIndex = selectedIndex;
        // TODO: we should not cast the selected value to a string here, but this is a breaking change.
        this.emit("change", {
            index: selectedIndex,
            selected: [String(option.value)],
            el,
        });
    }
    handleFloatingLabelInit() {
        this.emit("floating-label-init");
    }
    onCreate() {
        this.state = { selectedIndex: 0 };
    }
    onInput(input) {
        this.state.selectedIndex = 0;
        let i = 0;
        for (const option of input.option || []) {
            if (option.selected) {
                this.state.selectedIndex = i;
                break;
            }
            i++;
        }
    }
    onMount() {
        this._setupMakeup();
        const parentForm = this.el.closest("form");
        if (parentForm) {
            const { selectedIndex } = document.getElementById(this.selectId);
            this.subscribeTo(parentForm).on("reset", () => {
                this.handleChange({ target: { selectedIndex } });
            });
        }
    }
    onUpdate() {
        this._setupMakeup();
    }
    _setupMakeup() {
        // TODO: makeup-floating-label should be updated so that we can remove the event listeners.
        // It probably makes more sense to just move this functionality into Marko though.
        if (this.input.floatingLabel) {
            if (this._floatingLabel) {
                this._floatingLabel.refresh();
                this.handleFloatingLabelInit();
            }
            else if (document.readyState === "complete") {
                if (this.el) {
                    this._floatingLabel = new makeup_floating_label_1.default(this.el);
                    this.handleFloatingLabelInit();
                }
            }
            else {
                this.subscribeTo(window).once("load", this._setupMakeup.bind(this));
            }
        }
    }
}
module.exports = Select;
