import { h } from "@stencil/core";
import { ElementQuestionBase } from '../../../utils/element-question-base';
export class BceElementInputTemplate {
    constructor() {
        this.label = {
            name: 'Input',
            labelQuestion: 'Formulate your question',
            labelRequired: 'Required',
            labelMultiline: 'Multiline',
            labelMin: 'Min',
            labelMax: 'Max',
            labelHasAnswer: 'Answer',
            labelAnswer: '',
            placeholderAnswer: 'Formulate the correct answer'
        };
        // private handleInput(name: string, event: Event) {
        //   const input = event.target as any;
        //   if (!input) return;
        //
        //   const { value } = input;
        //   if (name === 'answer' && !value) this.hasAnswer = false;
        //   if (name === 'hasAnswer' && !value) this.answer = '';
        //   if (name === 'multiline') {
        //     this.hasAnswer = false;
        //     this.answer = '';
        //   }
        //
        //   event.cancelBubble = true;
        //   (this as any)[name] = value;
        //   this.value = this.updateValue({ [name]: value });
        //   this.el.dispatchEvent(new Event('input', { bubbles: true }));
        // }
        this.onAnswer = (value) => {
            if (!value)
                this.handler.set('hasAnswer', false);
        };
        this.onHasAnswer = (value) => {
            if (!value)
                this.handler.set('answer', '', { localize: true });
        };
        this.onMultiline = (value) => {
            this.handler.set('hasAnswer', false);
            this.handler.set('answer', '', { localize: true });
        };
    }
    prop(path, options = {}) {
        return this.handler.prop(path, Object.assign(Object.assign({}, options), { label: this.label }));
    }
    render() {
        const { hasAnswer, multiline } = this.value;
        return (h(ElementQuestionBase, { question: this.prop('question', { localize: true }), required: this.prop('required') },
            h("bce-switch", Object.assign({}, this.prop('multiline', { on: this.onMultiline }))),
            h("bce-input", Object.assign({}, this.prop('min'), { type: "number" })),
            h("bce-input", Object.assign({}, this.prop('max'), { type: "number" })),
            h("bce-switch", Object.assign({}, this.prop('hasAnswer', { on: this.onHasAnswer }))),
            hasAnswer && (h("bce-input", Object.assign({}, this.prop('answer', { on: this.onAnswer, localize: true }), { type: multiline ? 'textarea' : 'text', validation: "required" }))),
            h("slot", null)));
    }
    static get is() { return "bce-element-input-editor"; }
    static get encapsulation() { return "shadow"; }
    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
        },
        "label": {
            "type": "unknown",
            "mutable": false,
            "complexType": {
                "original": "InputElement.Label",
                "resolved": "Label",
                "references": {
                    "InputElement": {
                        "location": "import",
                        "path": "./element-input"
                    }
                }
            },
            "required": false,
            "optional": false,
            "docs": {
                "tags": [],
                "text": ""
            },
            "defaultValue": "{\n    name: 'Input',\n    labelQuestion: 'Formulate your question',\n    labelRequired: 'Required',\n    labelMultiline: 'Multiline',\n    labelMin: 'Min',\n    labelMax: 'Max',\n    labelHasAnswer: 'Answer',\n    labelAnswer: '',\n    placeholderAnswer: 'Formulate the correct answer'\n  }"
        },
        "value": {
            "type": "unknown",
            "mutable": false,
            "complexType": {
                "original": "InputElement",
                "resolved": "InputElement",
                "references": {
                    "InputElement": {
                        "location": "import",
                        "path": "./element-input"
                    }
                }
            },
            "required": true,
            "optional": false,
            "docs": {
                "tags": [],
                "text": ""
            }
        }
    }; }
}
