import { h } from "@stencil/core";
export class BceElementMatrix {
    constructor() {
        this.value = this.template
            ? Array(this.template.rows.length).fill(null)
            : [];
        this.handleInput = (event) => {
            event.cancelBubble = true;
            const rows = this.el.shadowRoot.querySelectorAll('bce-select');
            this.value = Array.from(rows).map(el => {
                const str = typeof el.value === 'string' && el.value.split(',')[1];
                return str ? parseInt(str, 10) : null;
            });
            this.el.dispatchEvent(new Event('input', { bubbles: true }));
        };
    }
    async validate(silent = false) {
        const root = this.el.shadowRoot;
        const inputs = Array.from(root.querySelectorAll('bce-select'));
        const errors = await Promise.all(inputs.map(el => el.validate(silent)));
        return [].concat(...errors);
    }
    renderHeader() {
        return this.handler.t('columns').map(col => {
            if (col.icon)
                return h("bce-icon", { raw: col.icon, style: { color: col.color } });
            return h("label", null, col.text);
        });
    }
    renderRow(r) {
        if (!this.template)
            return null;
        const value = this.value[r] != null ? `${r},${this.value[r]}` : null;
        return (h("bce-select", { allowNull: this.allowNull, design: "matrix", type: "radio", value: value, validation: this.template.required ? 'required' : '', onInput: this.handleInput }, this.template.columns.map((_, c) => (h("bce-option", { allowNull: this.allowNull, value: `${r},${c}` })))));
    }
    render() {
        if (!this.template)
            return null;
        const { orientation } = this.template;
        const rows = this.handler
            .t('rows')
            .map((row, i) => [
            h("label", { class: "row" }, row.text),
            this.renderRow(i)
        ]);
        return [
            h("p", null, this.handler.t('question')),
            h("div", null),
            h("div", { class: "cl", "data-orientation": orientation }, this.renderHeader()),
            rows
        ];
    }
    static get is() { return "bce-element-matrix"; }
    static get encapsulation() { return "shadow"; }
    static get originalStyleUrls() { return {
        "$": ["bce-element-matrix.scss"]
    }; }
    static get styleUrls() { return {
        "$": ["bce-element-matrix.css"]
    }; }
    static get properties() { return {
        "allowNull": {
            "type": "boolean",
            "mutable": false,
            "complexType": {
                "original": "boolean",
                "resolved": "boolean | undefined",
                "references": {}
            },
            "required": false,
            "optional": true,
            "docs": {
                "tags": [],
                "text": ""
            },
            "attribute": "allow-null",
            "reflect": true
        },
        "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": "MatrixElement",
                "resolved": "MatrixElement",
                "references": {
                    "MatrixElement": {
                        "location": "import",
                        "path": "./element-matrix"
                    }
                }
            },
            "required": true,
            "optional": false,
            "docs": {
                "tags": [],
                "text": ""
            }
        },
        "value": {
            "type": "unknown",
            "mutable": false,
            "complexType": {
                "original": "(number | null)[]",
                "resolved": "(number | null)[]",
                "references": {}
            },
            "required": false,
            "optional": false,
            "docs": {
                "tags": [],
                "text": ""
            },
            "defaultValue": "this.template\n    ? Array(this.template.rows.length).fill(null)\n    : []"
        }
    }; }
    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"
                    }
                },
                "return": "Promise<ValidatorError[]>"
            },
            "docs": {
                "text": "",
                "tags": []
            }
        }
    }; }
    static get elementRef() { return "el"; }
}
