import { h, Host } from "@stencil/core";
export class BceElementRadio {
    constructor() {
        this.handleFocus = (event) => {
            // const input = event.target as HTMLBceInputElement;
            // this.value = {
            //   index: this.template.options.length - 1,
            //   text: input.value as string
            // };
            // this.el.dispatchEvent(new Event('input', { bubbles: true }));
        };
        this.handleOption = (event) => {
            if (!this.template)
                return;
            event.cancelBubble = true;
            const input = event.target;
            const index = parseInt(input.value, 10);
            if (isNaN(index))
                return;
            const text = this.template.options[index].text;
            this.value = { index, text };
            if (this.template.other && index === this.template.options.length - 1) {
                const query = this.el.shadowRoot.querySelector('bce-option bce-input');
                const input = query;
                this.value.text = input.value;
                input.shadowRoot.querySelector('input').focus();
            }
            this.el.dispatchEvent(new Event('input', { bubbles: true }));
        };
        this.handleInput = (event) => {
            event.cancelBubble = true;
            this.value = {
                index: this.template.options.length - 1,
                text: event.target.value
            };
            this.el.dispatchEvent(new Event('input', { bubbles: true }));
        };
    }
    async validate(silent = false) {
        const root = this.el.shadowRoot;
        const query = root.querySelectorAll('bce-input, bce-select');
        const inputs = Array.from(query);
        const errors = await Promise.all(inputs.map(el => el.validate(silent)));
        return [].concat(...errors);
    }
    renderOther(option, index) {
        const isInput = this.value && this.value.index === index;
        const text = isInput ? this.value.text : '';
        const validation = isInput ? 'required' : '';
        return (h("bce-input", { placeholder: option.text, validation: validation, value: text || '', onFocus: this.handleFocus, 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.handler.t('question')),
            h("bce-select", { type: "radio", validation: this.template.required ? 'required' : '', value: this.value ? '' + this.value.index : undefined, onInput: this.handleOption }, this.handler
                .t('options')
                .map((o, i) => this.renderOption(o, i)))));
    }
    static get is() { return "bce-element-radio"; }
    static get encapsulation() { return "shadow"; }
    static get originalStyleUrls() { return {
        "$": ["bce-element-radio.scss"]
    }; }
    static get styleUrls() { return {
        "$": ["bce-element-radio.css"]
    }; }
    static get properties() { return {
        "handler": {
            "type": "unknown",
            "mutable": false,
            "complexType": {
                "original": "InputHandler",
                "resolved": "InputHandler",
                "references": {
                    "InputHandler": {
                        "location": "import",
                        "path": "../../../utils/input-handler"
                    }
                }
            },
            "required": true,
            "optional": false,
            "docs": {
                "tags": [],
                "text": ""
            }
        },
        "language": {
            "type": "string",
            "mutable": false,
            "complexType": {
                "original": "string",
                "resolved": "string | undefined",
                "references": {}
            },
            "required": false,
            "optional": true,
            "docs": {
                "tags": [],
                "text": ""
            },
            "attribute": "language",
            "reflect": false
        },
        "template": {
            "type": "unknown",
            "mutable": false,
            "complexType": {
                "original": "RadioElement",
                "resolved": "RadioElement",
                "references": {
                    "RadioElement": {
                        "location": "import",
                        "path": "./element-radio"
                    }
                }
            },
            "required": true,
            "optional": false,
            "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 methods() { return {
        "validate": {
            "complexType": {
                "signature": "(silent?: boolean) => Promise<import(\"/Users/ngfk/Repositories/bce-module-editor/node_modules/@bcase/core/dist/types/index\").ValidatorError[]>",
                "parameters": [{
                        "tags": [],
                        "text": ""
                    }],
                "references": {
                    "Promise": {
                        "location": "global"
                    },
                    "ValidatorError": {
                        "location": "global"
                    },
                    "HTMLBceInputElement": {
                        "location": "global"
                    },
                    "HTMLBceSelectElement": {
                        "location": "global"
                    },
                    "Inputs": {
                        "location": "global"
                    }
                },
                "return": "Promise<ValidatorError[]>"
            },
            "docs": {
                "text": "",
                "tags": []
            }
        }
    }; }
    static get elementRef() { return "el"; }
}
