import { InputVariableView } from "./InputVariableView.js";
import { InputEditorView } from "./InputEditorView.js";
import { FeatureBlend } from "../../../FeatureBlend.js";
export var DynamicVariableType;
(function (DynamicVariableType) {
    DynamicVariableType[DynamicVariableType["None"] = 0] = "None";
    DynamicVariableType[DynamicVariableType["Context"] = 1] = "Context";
})(DynamicVariableType || (DynamicVariableType = {}));
export var DynamicVariableCss;
(function (DynamicVariableCss) {
    DynamicVariableCss["None"] = "-fb-dynamics-none";
    DynamicVariableCss["Context"] = "-fb-dynamics-datatag";
})(DynamicVariableCss || (DynamicVariableCss = {}));
export class InputView extends Jade.UI.Control {
    constructor(options) {
        super(options);
        this.m_editorModel = options.editor;
        this.state.unset("editor");
        this.editorModel.group.globals.events.errorsLoadSubscribe(() => {
            this.processValidationErrors();
        });
    }
    get group() {
        return this.editorModel.group;
    }
    get editorModel() {
        return this.m_editorModel;
    }
    get editorView() {
        return this.m_editorView;
    }
    get variableView() {
        return this.m_variableView;
    }
    get contentNode() {
        return this.node.find(".-fb-grid-input-content");
    }
    get labelNode() {
        return this.node.find(".-fb-grid-input-label");
    }
    get deckNode() {
        return this.node.find(".-fb-grid-input-deck");
    }
    get visible() {
        return this.node.is(":visible");
    }
    get variableSupported() {
        if (this.m_variableSupported == null) {
            this.m_variableSupported =
                Jade.Arithmetic.randomInteger(0, 1) == 1 ? true : false;
        }
        return false;
    }
    get variableUsed() {
        if (this.m_variableUsed == null) {
            this.m_variableUsed =
                Jade.Arithmetic.randomInteger(0, 1) == 1 ? true : false;
        }
        return false;
    }
    get variableButtonNode() {
        return this.node.find("button[role=variable]");
    }
    template() {
        let icon = Jade.IconSet.get("pdjs")
            .resolve("function.png", Jade.IconSetSizeSpecificDirectory.x16);
        return `<div class="-fb-grid-input ${this.editorModel.required ? "-fb-grid-input-required" : ""}">
                    <div class="-fb-grid-input-label">
                        ${this.editorModel.label}
                    </div>
                    <div class="-fb-grid-input-content" data-controls></div>
                    <div class="-fb-grid-input-deck">
                        <button 
                            role="variable"
                            style="background-image:url(${icon});">
                        </button>
                    </div>
                </div>`;
    }
    onActivate(e) {
        super.onActivate(e);
        this.variableButtonNode.on(Jade.BrowserEvent.CLICK, () => {
            this.variableButton_click();
        });
        this.labelNode.on(Jade.BrowserEvent.CLICK, (e) => { this.labelNode_onClick(e); });
        this.contentNode.on(Jade.BrowserEvent.MOUSEDOWN, (e) => { this.contentNode_onClick(e); });
        this.contentNode.on(Jade.BrowserEvent.FOCUS, "input, select, button, a", (e) => {
            this.contentNode_onFocus(e);
        });
        this.contentNode.on(Jade.BrowserEvent.BLUR, "input, select, button, a", (e) => {
            this.contentNode_onBlur(e);
        });
        this.editor_init();
        this.variable_init();
        this.group.locals.events.labelResizeSubscribe((e) => {
            this.node.css({
                gridTemplateColumns: this.getGridTemplateColumns(e.width)
            });
        });
        this.setVariableState();
        this.processValidationErrors();
    }
    editor_init() {
        this.m_editorView = new InputEditorView({
            editor: this.editorModel,
            focus: () => {
                this.highlightLabel();
            }
        });
        this.controls.add(this.m_editorView);
    }
    variable_init() {
        if (!this.variableSupported) {
            return;
        }
        this.m_variableView = new InputVariableView({
            editor: this.editorModel,
            variableUsed: this.variableSupported && this.variableUsed,
            focus: () => {
                this.highlightLabel();
            }
        });
        this.controls.add(this.m_variableView);
    }
    labelNode_onClick(e) {
        this.editorView.focus();
        this.highlightLabel();
    }
    contentNode_onClick(e) {
        this.highlightLabel();
    }
    contentNode_onFocus(e) {
        this.highlightLabel();
        if (this.labelNode.hasClass("-fb-grid-input-label-error")) {
            Tipped.show(this.labelNode);
        }
    }
    contentNode_onBlur(e) {
        this.highlightLabel();
        if (this.labelNode.hasClass("-fb-grid-input-label-error")) {
            Tipped.hide(this.labelNode);
        }
    }
    highlightLabel() {
        this.editorModel.group.locals.events.inputSelectedPublish({
            model: this.editorModel
        });
        this.labelNode.addClass("-fb-input-selected");
        this.commitFocusToStorage();
    }
    getGridTemplateColumns(labelWidth) {
        return `${labelWidth}px auto ${this.variableSupported ? " 23px" : ""}`;
    }
    setVariableState() {
        this.variableButtonNode.removeClass(DynamicVariableCss.None);
        this.variableButtonNode.removeClass(DynamicVariableCss.Context);
        if (this.variableUsed) {
            this.variableButtonNode.addClass(DynamicVariableCss.None);
        }
        else {
            this.variableButtonNode.addClass(DynamicVariableCss.Context);
        }
        this.node.css({
            gridTemplateColumns: this.getGridTemplateColumns(150)
        });
        this.deckNode.css({
            display: this.variableSupported ? "block" : "none"
        });
        if (this.variableSupported && this.variableUsed) {
            this.showVariableInput();
        }
    }
    variableButton_click() {
        if (this.variableView.node.is(":visible")) {
            this.showEditorInput();
        }
        else {
            this.showVariableInput();
        }
    }
    showVariableInput() {
        if (this.variableView === null) {
            return;
        }
        this.variableView.show();
        this.editorView.hide();
        this.variableButtonNode.addClass("-fb-enabled");
    }
    showEditorInput() {
        if (this.variableView === null) {
            return;
        }
        this.variableView.hide();
        this.editorView.show();
        this.variableButtonNode.removeClass("-fb-enabled");
    }
    processValidationErrors() {
        let errors = [];
        this.editorModel.feature.errors.forEach(error => {
            if (error.propertyName != null && error.propertyName.toLowerCase() === this.editorModel.name.toLowerCase()) {
                errors[errors.length] = error;
            }
        });
        if (errors.length === 0) {
            this.labelNode.removeClass("-fb-grid-input-label-error");
            this.labelNode.css({
                backgroundImage: "none"
            });
            Tipped.remove(this.labelNode);
            return;
        }
        this.labelNode.addClass("-fb-grid-input-label-error");
        this.labelNode.css({
            backgroundImage: `url(${Jade.IconSet.get("pdjs").resolve("sign_warning.png", Jade.IconSetSizeSpecificDirectory.x16)})`
        });
        let text = errors.flatMap((item) => {
            return item.message;
        }).join("</div><div>");
        Tipped.remove(this.labelNode);
        Tipped.create(this.labelNode, `<div class="-fb-popup-error -fb-grid-input-label-error-tooltip">${text}</div>`, {
            skin: FeatureBlend.errorTooltipSkin
        });
    }
    commitFocusToStorage() {
        this.editorModel.group.locals.storage.focusedInputId = this.editorModel.uid;
    }
}
