import { InputEditorView } from "./InputEditorView.js";
import { FeatureBlend } from "../../../FeatureBlend.js";
import { ErrorModelCollectionEventType } from "../../../Models/ErrorModelCollectionEvent.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.m_loadErrorsSubscription =
            this.editorModel.root.errors.subscribe((e) => {
                this.processValidationErrors();
            }, ErrorModelCollectionEventType.load);
        this.m_clearErrorsSubscription =
            this.editorModel.root.errors.subscribe((e) => {
                this.processValidationErrors();
            }, ErrorModelCollectionEventType.clear);
    }
    get group() {
        return this.editorModel.group;
    }
    get editorModel() {
        return this.m_editorModel;
    }
    get feature() {
        return this.editorModel.feature;
    }
    get editorView() {
        return this.m_editorView;
    }
    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");
    }
    template() {
        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"></div>
                </div>`;
    }
    onActivate(e) {
        super.onActivate(e);
        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, textarea", (e) => {
            this.contentNode_onFocus(e);
        });
        this.contentNode.on(Jade.BrowserEvent.BLUR, "input, select, button, a, textarea", (e) => {
            this.contentNode_onBlur(e);
        });
        this.editor_init();
        this.extenders_init();
        this.group.locals.events.labelResizeSubscribe((e) => {
            this.node.css({
                gridTemplateColumns: this.getGridTemplateColumns(e.width)
            });
        });
        this.processValidationErrors();
        if (!this.editorModel.enabled) {
            this.node.addClass("-fb-disabled");
        }
        if (this.editorModel.readOnly) {
            this.node.addClass("-fb-readonly");
        }
    }
    onDestroy(e) {
        super.onDestroy(e);
        if (this.m_clearErrorsSubscription) {
            this.m_clearErrorsSubscription.unsubscribe();
        }
        if (this.m_loadErrorsSubscription) {
            this.m_loadErrorsSubscription.unsubscribe();
        }
    }
    editor_init() {
        this.m_editorView = new InputEditorView({
            editor: this.editorModel,
            focus: () => {
                this.highlightLabel();
            }
        });
        this.controls.add(this.m_editorView);
    }
    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.deckNode.children().length > 0 ? " max-content" : ""}`;
    }
    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"><div>${text}</div></div>`, {
            skin: FeatureBlend.errorTooltipSkin
        });
    }
    commitFocusToStorage() {
        this.editorModel.group.locals.storage.focusedInputId = this.editorModel.uid;
    }
    extenders_init() {
        FeatureBlend.editorExtenders.items.forEach((item) => {
            let extender = item({
                editorModel: this.editorModel,
                extenderId: FeatureBlend.editorExtenders.getId(item)
            });
            if (!extender) {
                return;
            }
            let button = extender.mount({
                click: (e) => {
                    e.visible ?
                        this.editorView.hide() :
                        this.editorView.show();
                }
            });
            if (extender.isActive()) {
                if (extender != null) {
                    this.controls.add(extender);
                }
                if (button != null) {
                    this.deckNode.append(button);
                }
                this.node.css({
                    gridTemplateColumns: this.getGridTemplateColumns(150)
                });
                this.deckNode.css({
                    display: this.deckNode.children.length > 0 ? "block" : "none"
                });
            }
        });
    }
}
