import { h } from "@stencil/core";
import CodeFlask from 'codeflask';
import { getInputCreator } from '../bce-input-creator/input-creator';
export class CodeEditor {
    constructor() {
        this.compact = false;
        this.disabled = false;
        this.hasFocus = false;
        this.lineNumbers = false;
        this._initialValue = this.value;
        this._inputCreator = getInputCreator(this, err => (this.error = !!err));
        this.handleBlur = (event) => {
            this.hasFocus = false;
            this._inputCreator.validate();
            const e = new FocusEvent(event.type, Object.assign(Object.assign({}, event), { bubbles: true }));
            this.el.dispatchEvent(e);
        };
        this.handleFocus = (event) => {
            this.hasFocus = true;
            const e = new FocusEvent(event.type, Object.assign(Object.assign({}, event), { bubbles: true }));
            this.el.dispatchEvent(e);
        };
    }
    watchValue(value) {
        if (this._editor)
            this._editor.updateCode(value);
    }
    watchDisabled(value) {
        if (!this._editor)
            return;
        if (value)
            this._editor.enableReadonlyMode();
        else
            this._editor.disableReadonlyMode();
    }
    async reset() {
        this.value = this._initialValue;
        this._inputCreator.reset();
    }
    async validate(silent = false) {
        return this._inputCreator.validate(silent);
    }
    resize() {
        const min = window.innerWidth < 1024 || this.compact ? 48 : 40;
        // Reset
        const textarea = this.el.querySelector('textarea');
        const container = this.el.querySelector('.codeflask');
        textarea.style.setProperty('height', min + 'px');
        // Recalculate
        const height = min > textarea.scrollHeight ? min : textarea.scrollHeight;
        textarea.style.setProperty('height', height + 'px');
        container.style.setProperty('height', height + 'px');
    }
    async componentDidLoad() {
        this._editor = new CodeFlask(this.el, {
            language: 'js',
            lineNumbers: this.lineNumbers,
            readonly: this.disabled
        });
        this.watchValue(this.value);
        this.watchDisabled(this.disabled);
        this._editor.onUpdate((code) => {
            this.resize();
            this.value = code;
            this.el.dispatchEvent(new Event('input'));
        });
        const textarea = this.el.querySelector('textarea');
        textarea.addEventListener('focus', this.handleFocus);
        textarea.addEventListener('blur', this.handleBlur);
        this.resize();
    }
    render() {
        const InputCreator = this._inputCreator;
        return (h(InputCreator, null,
            h("slot", null)));
    }
    static get is() { return "bce-code-editor"; }
    static get encapsulation() { return "shadow"; }
    static get originalStyleUrls() { return {
        "$": ["bce-code-editor.scss"]
    }; }
    static get styleUrls() { return {
        "$": ["bce-code-editor.css"]
    }; }
    static get properties() { return {
        "compact": {
            "type": "boolean",
            "mutable": false,
            "complexType": {
                "original": "boolean",
                "resolved": "boolean",
                "references": {}
            },
            "required": false,
            "optional": false,
            "docs": {
                "tags": [],
                "text": ""
            },
            "attribute": "compact",
            "reflect": true,
            "defaultValue": "false"
        },
        "disabled": {
            "type": "boolean",
            "mutable": false,
            "complexType": {
                "original": "boolean",
                "resolved": "boolean",
                "references": {}
            },
            "required": false,
            "optional": false,
            "docs": {
                "tags": [],
                "text": ""
            },
            "attribute": "disabled",
            "reflect": true,
            "defaultValue": "false"
        },
        "error": {
            "type": "boolean",
            "mutable": false,
            "complexType": {
                "original": "boolean",
                "resolved": "boolean",
                "references": {}
            },
            "required": false,
            "optional": true,
            "docs": {
                "tags": [],
                "text": ""
            },
            "attribute": "error",
            "reflect": true
        },
        "hasFocus": {
            "type": "boolean",
            "mutable": true,
            "complexType": {
                "original": "boolean",
                "resolved": "boolean",
                "references": {}
            },
            "required": false,
            "optional": false,
            "docs": {
                "tags": [],
                "text": ""
            },
            "attribute": "focus",
            "reflect": true,
            "defaultValue": "false"
        },
        "info": {
            "type": "string",
            "mutable": false,
            "complexType": {
                "original": "string",
                "resolved": "string",
                "references": {}
            },
            "required": false,
            "optional": true,
            "docs": {
                "tags": [],
                "text": ""
            },
            "attribute": "info",
            "reflect": true
        },
        "label": {
            "type": "string",
            "mutable": false,
            "complexType": {
                "original": "string",
                "resolved": "string",
                "references": {}
            },
            "required": false,
            "optional": true,
            "docs": {
                "tags": [],
                "text": ""
            },
            "attribute": "label",
            "reflect": true
        },
        "lineNumbers": {
            "type": "boolean",
            "mutable": false,
            "complexType": {
                "original": "boolean",
                "resolved": "boolean",
                "references": {}
            },
            "required": false,
            "optional": false,
            "docs": {
                "tags": [],
                "text": ""
            },
            "attribute": "line-numbers",
            "reflect": true,
            "defaultValue": "false"
        },
        "name": {
            "type": "string",
            "mutable": false,
            "complexType": {
                "original": "string",
                "resolved": "string",
                "references": {}
            },
            "required": false,
            "optional": true,
            "docs": {
                "tags": [],
                "text": ""
            },
            "attribute": "name",
            "reflect": true
        },
        "tooltip": {
            "type": "string",
            "mutable": false,
            "complexType": {
                "original": "string",
                "resolved": "string",
                "references": {}
            },
            "required": false,
            "optional": true,
            "docs": {
                "tags": [],
                "text": ""
            },
            "attribute": "tooltip",
            "reflect": false
        },
        "validation": {
            "type": "string",
            "mutable": false,
            "complexType": {
                "original": "string",
                "resolved": "string",
                "references": {}
            },
            "required": false,
            "optional": true,
            "docs": {
                "tags": [],
                "text": ""
            },
            "attribute": "validation",
            "reflect": true
        },
        "value": {
            "type": "string",
            "mutable": true,
            "complexType": {
                "original": "string",
                "resolved": "string",
                "references": {}
            },
            "required": false,
            "optional": true,
            "docs": {
                "tags": [],
                "text": ""
            },
            "attribute": "value",
            "reflect": false
        }
    }; }
    static get methods() { return {
        "reset": {
            "complexType": {
                "signature": "() => Promise<void>",
                "parameters": [],
                "references": {
                    "Promise": {
                        "location": "global"
                    }
                },
                "return": "Promise<void>"
            },
            "docs": {
                "text": "",
                "tags": []
            }
        },
        "validate": {
            "complexType": {
                "signature": "(silent?: boolean) => Promise<ValidatorError[]>",
                "parameters": [{
                        "tags": [],
                        "text": ""
                    }],
                "references": {
                    "Promise": {
                        "location": "global"
                    },
                    "ValidatorError": {
                        "location": "import",
                        "path": "../../utils/validator"
                    }
                },
                "return": "Promise<ValidatorError[]>"
            },
            "docs": {
                "text": "",
                "tags": []
            }
        }
    }; }
    static get elementRef() { return "el"; }
    static get watchers() { return [{
            "propName": "value",
            "methodName": "watchValue"
        }, {
            "propName": "disabled",
            "methodName": "watchDisabled"
        }]; }
}
