'use strict';

Object.defineProperty(exports, '__esModule', { value: true });

const index$1 = require('./index-578e90b1.js');

const BceElementCheckbox = class {
    constructor(hostRef) {
        index$1.registerInstance(this, hostRef);
        this.options = [];
        this.handleOption = (event) => {
            var _a;
            if (!this.template)
                return;
            event.cancelBubble = true;
            const input = event.target;
            const value = (input.value || []);
            const query = this.el.shadowRoot.querySelector('bce-option bce-input');
            const otherEl = query;
            const last = this.template.options.length - 1;
            const oldValues = (_a = this.value) === null || _a === void 0 ? void 0 : _a.find(value => value.index === last);
            const newValues = value.indexOf('' + last) >= 0;
            const hasIndex = !oldValues && newValues;
            if (this.template.other && hasIndex)
                otherEl.shadowRoot.querySelector('input').focus();
            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 };
            })
                .sort((a, b) => a.index - b.index);
            // const index = -1;
            // if (otherEl && index === this.template!.options.length - 1)
            this.el.dispatchEvent(new Event('input', { bubbles: true, composed: true }));
        };
        this.handleInput = (event) => {
            event.cancelBubble = true;
        };
    }
    generateOptions() {
        const options = this.handler
            .t('options')
            .map((option, index) => ({ option, index }));
        if (this.shuffle) {
            for (let i = options.length - 1; i > 0; i--) {
                let j = Math.floor(Math.random() * (i + 1));
                [options[i], options[j]] = [options[j], options[i]];
            }
        }
        this.options = options;
    }
    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);
    }
    componentWillLoad() {
        this.generateOptions();
    }
    renderOther(option, index) {
        const value = this.value && this.value[this.value.length - 1];
        const isInput = value && value.index === index;
        const text = isInput ? value && value.text : '';
        const validation = isInput ? 'required' : '';
        return (index$1.h("bce-input", { disabled: this.disabled, placeholder: option.text, validation: validation, 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 (index$1.h("bce-option", { value: '' + index }, other ? this.renderOther(option, index) : option.text));
    }
    render() {
        if (!this.template)
            return null;
        const validation = this.template.required
            ? ['required', this.template.validation].filter(v => !!v).join('|')
            : this.template.validation;
        return (index$1.h(index$1.Host, { orientation: this.template.orientation }, index$1.h("p", null, this.handler.t('question')), index$1.h("bce-select", { disabled: this.disabled, type: "checkbox", value: this.value && this.value.map(value => value.index + ''), validation: validation, onInput: this.handleOption }, this.options.map(o => this.renderOption(o.option, o.index)))));
    }
    get el() { return index$1.getElement(this); }
    static get watchers() { return {
        "language": ["generateOptions"],
        "shuffle": ["generateOptions"],
        "template": ["generateOptions"]
    }; }
    static get style() { return ":host p{font-weight:500;text-align:center}\@media screen and (min-width: 1024px){:host p{text-align:left}}:host bce-input{margin:0;padding:0 0 8px}:host([orientation=horizontal]) bce-option{display:-ms-inline-flexbox;display:inline-flex;margin:0 10px}"; }
};

exports.bce_element_checkbox = BceElementCheckbox;
