import { h, Host } from "@stencil/core";
import { UploadAdapter } from "./UploadAdapter";
export class CcTextarea {
    constructor() {
        this.color = "primary";
        this.error = false;
        this.success = false;
        this.disabled = false;
        this.rich = false;
        this.focusEditor = () => {
            if (this.rich) {
                this.editorInstance.editing.view.focus();
            }
            else {
                this.textAreaEl.focus();
            }
        };
    }
    async focusTextEditor() {
        this.focusEditor();
        return;
    }
    validateName(newDisabled) {
        if (this.editorInstance)
            this.editorInstance.isReadOnly = newDisabled;
    }
    toggleRichText(richNew, richOld) {
        if (richNew !== richOld) {
            if (richNew && !richNew) {
                this.enableRichTextEditor();
            }
            else {
                this.disableRichTextEditor();
            }
        }
    }
    setValue(newValue) {
        if (this.rich) {
            if (this.editorInstance)
                this.editorInstance.data.set(newValue);
        }
        else {
            this.textAreaEl.value = newValue;
        }
    }
    changeTextHandler(newText) {
        this.changeText.emit(newText);
    }
    setRichTextEditorDefaults() {
        this.editorInstance.isReadOnly = this.disabled;
        if (this.value)
            this.editorInstance.data.set(this.value);
        this.editorInstance.model.document.on("change:data", () => {
            this.changeTextHandler(this.editorInstance.getData());
        });
    }
    async enableRichTextEditor() {
        let toolbar = [
            "Undo",
            "Redo",
            "Heading",
            "Bold",
            "Italic",
            "numberedList",
            "bulletedList",
            "Link",
            "blockQuote"
        ];
        if (!this.rich)
            return null;
        const { default: ClassicEditor } = await import("@ckeditor/ckeditor5-build-classic");
        if (this.enableImage && this.imageService) {
            toolbar.push("imageUpload");
        }
        this.editorInstance = await ClassicEditor.create(this.richTextEl, {
            toolbar,
            placeholder: this.placeholder
        });
        this.setRichTextEditorDefaults();
        this.setAdapterUpload(this.editorInstance);
        this.editorInstance.model.change(writer => {
            writer.setSelection(writer.createPositionAt(this.editorInstance.model.document.getRoot(), "end"));
        });
        return this.editorInstance;
    }
    setAdapterUpload(editor) {
        if (!this.enableImage && !this.imageService) {
            return;
        }
        editor.plugins.get("FileRepository").createUploadAdapter = loader => {
            return new UploadAdapter({ loader, serviceUpload: this.imageService });
        };
    }
    disableRichTextEditor() {
        if (this.rich && this.editorInstance)
            this.editorInstance.destroy();
    }
    componentDidLoad() {
        this.enableRichTextEditor();
    }
    componentDidUnload() {
        this.disableRichTextEditor();
    }
    render() {
        return (h(Host, { class: {
                textarea: true,
                "textarea--primary": this.color === "primary",
                "textarea--secondary": this.color === "secondary",
                "textarea--success": this.success && !this.error && !this.disabled,
                "textarea--error": this.error && !this.success && !this.disabled,
                "textarea--disabled": this.disabled
            }, "data-testid": "cc-textarea" },
            this.label && (h("label", { class: "textarea__label", onClick: this.focusEditor }, this.label)),
            this.rich ? (h("div", { class: "textarea__richTextSkeleton", ref: el => (this.richTextEl = el) }, this.value ? this.value : "")) : (h("textarea", { ref: el => (this.textAreaEl = el), disabled: this.disabled, placeholder: this.placeholder, class: "textarea__field", name: this.name, value: this.value, onInput: e => this.changeTextHandler(e.target.value) })),
            this.helperText && this.error && !this.success && !this.disabled && (h("span", { class: "textarea__helperText", onClick: this.focusEditor }, this.helperText))));
    }
    static get is() { return "cc-textarea"; }
    static get originalStyleUrls() { return {
        "$": ["cc-textarea.scss"]
    }; }
    static get styleUrls() { return {
        "$": ["cc-textarea.css"]
    }; }
    static get properties() { return {
        "color": {
            "type": "string",
            "mutable": false,
            "complexType": {
                "original": "\"primary\" | \"secondary\"",
                "resolved": "\"primary\" | \"secondary\"",
                "references": {}
            },
            "required": false,
            "optional": false,
            "docs": {
                "tags": [],
                "text": ""
            },
            "attribute": "color",
            "reflect": false,
            "defaultValue": "\"primary\""
        },
        "label": {
            "type": "string",
            "mutable": false,
            "complexType": {
                "original": "string",
                "resolved": "string",
                "references": {}
            },
            "required": false,
            "optional": true,
            "docs": {
                "tags": [],
                "text": ""
            },
            "attribute": "label",
            "reflect": false
        },
        "error": {
            "type": "boolean",
            "mutable": false,
            "complexType": {
                "original": "boolean",
                "resolved": "boolean",
                "references": {}
            },
            "required": false,
            "optional": true,
            "docs": {
                "tags": [],
                "text": ""
            },
            "attribute": "error",
            "reflect": false,
            "defaultValue": "false"
        },
        "success": {
            "type": "boolean",
            "mutable": false,
            "complexType": {
                "original": "boolean",
                "resolved": "boolean",
                "references": {}
            },
            "required": false,
            "optional": true,
            "docs": {
                "tags": [],
                "text": ""
            },
            "attribute": "success",
            "reflect": false,
            "defaultValue": "false"
        },
        "disabled": {
            "type": "boolean",
            "mutable": false,
            "complexType": {
                "original": "boolean",
                "resolved": "boolean",
                "references": {}
            },
            "required": false,
            "optional": true,
            "docs": {
                "tags": [],
                "text": ""
            },
            "attribute": "disabled",
            "reflect": false,
            "defaultValue": "false"
        },
        "placeholder": {
            "type": "string",
            "mutable": false,
            "complexType": {
                "original": "string",
                "resolved": "string",
                "references": {}
            },
            "required": false,
            "optional": true,
            "docs": {
                "tags": [],
                "text": ""
            },
            "attribute": "placeholder",
            "reflect": false
        },
        "name": {
            "type": "string",
            "mutable": false,
            "complexType": {
                "original": "string",
                "resolved": "string",
                "references": {}
            },
            "required": false,
            "optional": true,
            "docs": {
                "tags": [],
                "text": ""
            },
            "attribute": "name",
            "reflect": false
        },
        "rich": {
            "type": "boolean",
            "mutable": false,
            "complexType": {
                "original": "boolean",
                "resolved": "boolean",
                "references": {}
            },
            "required": false,
            "optional": true,
            "docs": {
                "tags": [],
                "text": ""
            },
            "attribute": "rich",
            "reflect": false,
            "defaultValue": "false"
        },
        "value": {
            "type": "string",
            "mutable": false,
            "complexType": {
                "original": "string",
                "resolved": "string",
                "references": {}
            },
            "required": false,
            "optional": true,
            "docs": {
                "tags": [],
                "text": ""
            },
            "attribute": "value",
            "reflect": false
        },
        "helperText": {
            "type": "string",
            "mutable": false,
            "complexType": {
                "original": "string",
                "resolved": "string",
                "references": {}
            },
            "required": false,
            "optional": true,
            "docs": {
                "tags": [],
                "text": ""
            },
            "attribute": "helper-text",
            "reflect": false
        },
        "enableImage": {
            "type": "boolean",
            "mutable": false,
            "complexType": {
                "original": "boolean",
                "resolved": "boolean",
                "references": {}
            },
            "required": false,
            "optional": true,
            "docs": {
                "tags": [],
                "text": ""
            },
            "attribute": "enable-image",
            "reflect": false
        },
        "imageService": {
            "type": "unknown",
            "mutable": false,
            "complexType": {
                "original": "(file: any) => Promise<string>",
                "resolved": "(file: any) => Promise<string>",
                "references": {
                    "Promise": {
                        "location": "global"
                    }
                }
            },
            "required": false,
            "optional": true,
            "docs": {
                "tags": [],
                "text": ""
            }
        }
    }; }
    static get events() { return [{
            "method": "changeText",
            "name": "changeText",
            "bubbles": true,
            "cancelable": true,
            "composed": true,
            "docs": {
                "tags": [],
                "text": ""
            },
            "complexType": {
                "original": "string",
                "resolved": "string",
                "references": {}
            }
        }]; }
    static get methods() { return {
        "focusTextEditor": {
            "complexType": {
                "signature": "() => Promise<void>",
                "parameters": [],
                "references": {
                    "Promise": {
                        "location": "global"
                    }
                },
                "return": "Promise<void>"
            },
            "docs": {
                "text": "",
                "tags": []
            }
        }
    }; }
    static get watchers() { return [{
            "propName": "disabled",
            "methodName": "validateName"
        }, {
            "propName": "rich",
            "methodName": "toggleRichText"
        }, {
            "propName": "value",
            "methodName": "setValue"
        }]; }
}
