import { h, Host } from "@stencil/core";
export class BceElementCheckbox {
    constructor() {
        this.handleOption = (event) => {
            if (!this.template)
                return;
            event.cancelBubble = true;
            const input = event.target;
            const value = (input.value || []);
            const query = this.el.querySelector('bce-option bce-input');
            const otherEl = query;
            this.value = value.map(value => {
                const index = parseInt(value, 10);
                const text = otherEl && index === this.template.options.length - 1
                    ? otherEl.value
                    : this.template.options[index].text;
                return { index, text };
            });
            // const index = -1;
            // if (otherEl && index === this.template!.options.length - 1)
            this.el.dispatchEvent(new Event('input', { bubbles: true }));
        };
        this.handleInput = (event) => {
            event.cancelBubble = true;
            const options = Array.from(this.el.querySelectorAll('bce-option') || []);
            const last = options[options.length - 1];
            if (!last.checked)
                return;
            const input = event.target;
            this.value = [
                ...this.value.slice(0, -1),
                { index: parseInt(last.value, 10), text: input.value }
            ];
            this.el.dispatchEvent(new Event('input', { bubbles: true }));
        };
    }
    renderOther(option, index) {
        const value = this.value && this.value[this.value.length - 1];
        const text = value && value.index === index ? value.text : '';
        return (h("bce-input", { placeholder: option.text, value: text || '', onInput: this.handleInput }));
    }
    renderOption(option, index) {
        if (!this.template)
            return null;
        const other = this.template.other && index === this.template.options.length - 1;
        return (h("bce-option", { value: '' + index }, other ? this.renderOther(option, index) : option.text));
    }
    render() {
        if (!this.template)
            return null;
        return (h(Host, { orientation: this.template.orientation },
            h("p", null, this.template.question),
            h("bce-input", { type: "checkbox", value: this.value && this.value.map(value => value.index + ''), validation: this.template.required ? 'required' : '', onInput: this.handleOption }, this.template.options.map((o, i) => this.renderOption(o, i)))));
    }
    static get is() { return "bce-element-checkbox"; }
    static get originalStyleUrls() { return {
        "$": ["bce-element-checkbox.scss"]
    }; }
    static get styleUrls() { return {
        "$": ["bce-element-checkbox.css"]
    }; }
    static get properties() { return {
        "template": {
            "type": "unknown",
            "mutable": false,
            "complexType": {
                "original": "Block.ElementCheckbox.Template",
                "resolved": "undefined | { readonly answer: number[]; readonly question: string; readonly required: boolean; readonly orientation: \"horizontal\" | \"vertical\"; readonly options: SelectElementOption[]; readonly other: boolean; }",
                "references": {
                    "Block": {
                        "location": "import",
                        "path": "../../models/block"
                    }
                }
            },
            "required": false,
            "optional": true,
            "docs": {
                "tags": [],
                "text": ""
            }
        },
        "value": {
            "type": "unknown",
            "mutable": true,
            "complexType": {
                "original": "{ index: number; text: string }[]",
                "resolved": "undefined | { index: number; text: string; }[]",
                "references": {}
            },
            "required": false,
            "optional": true,
            "docs": {
                "tags": [],
                "text": ""
            }
        }
    }; }
    static get elementRef() { return "el"; }
}
