import { FeatureBlend } from "source/FeatureBlend.js";
export class InputVariableView extends Jade.UI.Control {
    constructor(options) {
        super(options);
    }
    get editorModel() {
        return this.m_editorModel;
    }
    get feature() {
        return this.editorModel.feature;
    }
    get inputNode() {
        return this.node.find("input");
    }
    get focusCallback() {
        return this.state.get("focus", () => { });
    }
    get variableUsed() {
        return this.state.get("variableSupported", false);
    }
    get dynamics() {
        return this.feature.dynamics.find(item => item.clientPath === this.editorModel.name);
    }
    get setButtonNode() {
        return this.node.find(".-fb-grid-input-variable-set");
    }
    get clearButtonNode() {
        return this.node.find(".-fb-grid-input-variable-clear");
    }
    template() {
        return `<div class="-fb-grid-input-variable">
                    <div>
                        <input type="text" readonly class="-fb-grid-input-variable-value" />
                        <button class="-fb-grid-input-variable-clear" title="Clear variable"></button>
                    </div>
                    <div>
                        <button class="-fb-grid-input-variable-set" title="Set variable">...</button>
                    </div>
                </div>`;
    }
    show() {
        this.node.css({
            display: "grid"
        });
    }
    hide() {
        this.node.css({
            display: "none"
        });
    }
    onActivate(e) {
        super.onActivate(e);
        this.inputNode.on(Jade.BrowserEvent.FOCUS, () => {
            this.input_onFocus();
        });
        this.node.on(Jade.BrowserEvent.MOUSEENTER, ".-fb-grid-input-variable-value,.-fb-grid-input-variable-clear", () => {
            this.clearButtonNode.show();
        });
        this.node.on(Jade.BrowserEvent.MOUSELEAVE, ".-fb-grid-input-variable-value,.-fb-grid-input-variable-clear", () => {
            this.clearButtonNode.hide();
        });
        this.node.on(Jade.BrowserEvent.CLICK, ".-fb-grid-input-variable-set", () => {
            FeatureBlend.onVariableEdit({ button: this.setButtonNode });
        });
        this.variableUsed ? this.show() : this.hide();
    }
    input_onFocus() {
        this.focusCallback();
        this.inputNode.select();
    }
}
