import {
    shortcut,
    Widget,
    extend,
    emptyFn,
    createWidget,
    nextTick,
    Controller,
    AbsoluteLayout,
    VerticalLayout,
    bind,
    isEmpty,
    isKey
} from "@/core";
import { TextButton, Editor } from "@/base";

@shortcut()
export class SignTextEditor extends Widget {
    static xtype = "bi.sign_text_editor";

    static EVENT_CONFIRM = "EVENT_CONFIRM";
    static EVENT_CHANGE_CONFIRM = "EVENT_CHANGE_CONFIRM";
    static EVENT_CLICK_LABEL = "EVENT_CLICK_LABEL";

    _defaultConfig() {
        const conf = super._defaultConfig(...arguments);
        
        return extend(conf, {
            baseCls: `${conf.baseCls || ""} bi-sign-initial-editor`,
            validationChecker: emptyFn,
            text: "",
            height: 24,
        });
    }

    _init() {
        super._init(...arguments);
        const o = this.options;
        this.editor = createWidget({
            type: Editor.xtype,
            simple: o.simple,
            height: o.height,
            hgap: 4,
            vgap: 2,
            value: o.value,
            validationChecker: o.validationChecker,
            allowBlank: false,
        });
        this.text = createWidget({
            type: TextButton.xtype,
            cls: "sign-editor-text",
            title: () => this.getValue(),
            textAlign: o.textAlign,
            height: o.height,
            hgap: 4,
            handler: () => {
                this._showInput();
                this.editor.focus();
                this.editor.selectAll();
            },
        });
        this.text.on(TextButton.EVENT_CHANGE, () => {
            nextTick(() => {
                this.fireEvent(SignTextEditor.EVENT_CLICK_LABEL);
            });
        });
        createWidget({
            type: AbsoluteLayout.xtype,
            element: this,
            items: [
                {
                    el: this.text,
                    left: 0,
                    right: 0,
                    top: 0,
                    bottom: 0,
                }
            ],
        });
        this.editor.on(Controller.EVENT_CHANGE, (...args) => {
            this.fireEvent(Controller.EVENT_CHANGE, ...args);
        });
        this.editor.on(Editor.EVENT_CONFIRM, (...args) => {
            this._showHint();
            this._checkText();
            this.fireEvent(SignTextEditor.EVENT_CONFIRM, ...args);
        });
        this.editor.on(Editor.EVENT_CHANGE_CONFIRM, (...args) => {
            this._showHint();
            this._checkText();
            this.fireEvent(SignTextEditor.EVENT_CHANGE_CONFIRM, ...args);
        });
        this.editor.on(Editor.EVENT_ERROR, () => {
            this._checkText();
        });
        createWidget({
            type: VerticalLayout.xtype,
            scrolly: false,
            element: this,
            items: [this.editor],
        });
        this._showHint();
        this._checkText();
    }

    _checkText() {
        const o = this.options;
        nextTick(
            bind(() => {
                if (this.editor.getValue() === "") {
                    this.text.setValue(o.watermark || "");
                    this.text.element.addClass("bi-water-mark");
                } else {
                    let v = this.editor.getValue();
                    v = isEmpty(v) || v === o.text ? o.text : v + o.text;
                    this.text.setValue(v);
                    this.text.element.removeClass("bi-water-mark");
                }
            }, this)
        );
    }

    _showInput() {
        this.editor.visible();
        this.text.invisible();
    }

    _showHint() {
        this.editor.invisible();
        this.text.visible();
    }

    setTitle(title) {
        this.text.setTitle(title);
    }

    setWarningTitle(title) {
        this.text.setWarningTitle(title);
    }

    focus() {
        this._showInput();
        this.editor.focus();
    }

    blur() {
        this.editor.blur();
        this._showHint();
        this._checkText();
    }

    doRedMark() {
        if (this.editor.getValue() === "" && isKey(this.options.watermark)) {
            return;
        }
        this.text.doRedMark(...arguments);
    }

    unRedMark() {
        this.text.unRedMark(...arguments);
    }

    doHighLight() {
        if (this.editor.getValue() === "" && isKey(this.options.watermark)) {
            return;
        }
        this.text.doHighLight(...arguments);
    }

    unHighLight() {
        this.text.unHighLight(...arguments);
    }

    isValid() {
        return this.editor.isValid();
    }

    setErrorText(text) {
        this.editor.setErrorText(text);
    }

    getErrorText() {
        return this.editor.getErrorText();
    }

    isEditing() {
        return this.editor.isEditing();
    }

    getLastValidValue() {
        return this.editor.getLastValidValue();
    }

    getLastChangedValue() {
        return this.editor.getLastChangedValue();
    }

    setValue(v) {
        this.editor.setValue(v);
        this._checkText();
    }

    getValue() {
        return this.editor.getValue();
    }

    getState() {
        return this.text.getValue();
    }

    setState(v) {
        const o = this.options;
        this._showHint();
        v = isEmpty(v) || v === o.text ? o.text : v + o.text;
        this.text.setValue(v);
    }
}