"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.TreeRuleBuilder = void 0;
const tslib_1 = require("tslib");
const jsx_runtime_1 = require("react/jsx-runtime");
const react_1 = require("react");
const AutoBind_1 = require("@appglue/common/dist/Common/AutoBind");
const Sidebar_1 = require("../../CommonUI/BuilderUI/Sidebar");
const Topbar_1 = require("../../CommonUI/BuilderUI/Topbar");
const XBuilderEditPage_1 = require("../../CommonUI/BuilderUI/XBuilderEditPage");
const CodingIcon_1 = require("../../CommonUI/Icon/CodingIcon");
const DataIcon_1 = require("../../CommonUI/Icon/DataIcon");
const RuleTableIcon_1 = require("../../CommonUI/Icon/RuleTableIcon");
const TestDataIcon_1 = require("../../CommonUI/Icon/TestDataIcon");
const ObserveState_1 = require("../../CommonUI/StateManagement/ObserveState");
const StateManager_1 = require("@appglue/common/dist/Common/StateManager");
const XExecutableTester_1 = require("../../CommonUI/Testing/XExecutableTester");
const CommonStyles_1 = require("../DesignUI/CommonStyles");
const TreeRuleDesigner_1 = require("./Builder/TreeRuleDesigner");
const TreeRuleEditContext_1 = require("@appglue/common/dist/Rule/Tree/TreeRuleEditContext");
const RuleBuilderPage_1 = require("@appglue/common/dist/Rule/RuleBuilderPage");
const HTMLUtilities_1 = require("../../CommonUI/HTMLUtilities");
const TreeRuleConstant_1 = require("@appglue/common/dist/Rule/Tree/Common/TreeRuleConstant");
const DataBuilder_1 = require("../../DataBuilder/DataBuilder");
class TreeRuleBuilder extends react_1.Component {
    editContext;
    tabs;
    ruleDefinition;
    constructor(props) {
        super(props);
        this.ruleDefinition = props.ruleDefinition;
        this.editContext = new TreeRuleEditContext_1.TreeRuleEditContext(props.ruleDefinition);
        if (props.treeRuleName) {
            this.editContext.title = props.treeRuleName;
        }
        if (props.onRuleSave) {
            this.editContext.onRuleSave = props.onRuleSave;
        }
        if (props.onRuleCancel) {
            this.editContext.onRuleCancel = props.onRuleCancel;
        }
        this.tabs = this.getDefaultTabs();
    }
    _selectedForColor = undefined;
    get selectedForColor() {
        return this._selectedForColor;
    }
    set selectedForColor(sel) {
        this._selectedForColor = sel;
        StateManager_1.StateManager.propertyChanged(this, "selectedForColor");
    }
    onChangeRuleName(newName) {
        this.editContext.title = newName;
        StateManager_1.StateManager.propertyChanged(this.editContext, "title");
        if (this.props.onTreeRuleNameUpdate)
            this.props.onTreeRuleNameUpdate(newName);
    }
    setSelectedForColor(sequence, element) {
        let pos = HTMLUtilities_1.HTMLUtilities.getGeometryFromElement(element, TreeRuleConstant_1.TreeRuleConstant.DESIGN_SURFACE_ID);
        this.selectedForColor = {
            instance: sequence,
            position: {
                x: pos?.left || 0,
                y: pos?.top || 0,
            },
        };
    }
    getDefaultTabs() {
        return [
            {
                value: RuleBuilderPage_1.RuleBuilderPage.Rule,
                renderUI: () => ((0, jsx_runtime_1.jsx)(TreeRuleDesigner_1.TreeRuleDesigner, { editContext: this.editContext, ruleDefinition: this.ruleDefinition, treeRuleBuilder: this })),
                icon: (0, jsx_runtime_1.jsx)(RuleTableIcon_1.RuleTableIcon, {}),
            },
            {
                value: RuleBuilderPage_1.RuleBuilderPage.Data,
                renderUI: () => ((0, jsx_runtime_1.jsx)(DataBuilder_1.DataBuilder, { definition: this.props.ruleDefinition.getInputDefinition(), readOnly: !this.props.ruleDefinition.canChangeInputs })),
                icon: (0, jsx_runtime_1.jsx)(DataIcon_1.DataIcon, {}),
            },
            {
                value: RuleBuilderPage_1.RuleBuilderPage.Configuration,
                renderUI: () => (0, jsx_runtime_1.jsx)(XBuilderEditPage_1.XBuilderEditPage, { builder: this.props.ruleDefinition, updateCallback: () => { } }),
                icon: (0, jsx_runtime_1.jsx)(CodingIcon_1.CodingIcon, {}),
            },
            {
                value: RuleBuilderPage_1.RuleBuilderPage.Test,
                renderUI: () => ((0, jsx_runtime_1.jsx)(XExecutableTester_1.XExecutableTester, { saveUnitTest: this.props.saveUnitTest, executable: this.props.ruleDefinition })),
                icon: (0, jsx_runtime_1.jsx)(TestDataIcon_1.TestDataIcon, {}),
            },
        ];
    }
    render() {
        return ((0, jsx_runtime_1.jsxs)(CommonStyles_1.RuleEditorDiv, { children: [(0, jsx_runtime_1.jsx)(ObserveState_1.ObserveState, { listenTo: this.editContext, properties: ["title"], control: () => {
                        return ((0, jsx_runtime_1.jsx)(Topbar_1.Topbar, { onChangeName: this.onChangeRuleName, editContext: this.editContext, name: this.editContext.title, isActionDisabled: !this.editContext.lastSelectionElement, isRequiredActionGroup: false, onSave: this.editContext.onSave, onClose: this.editContext.onCancel }));
                    } }), (0, jsx_runtime_1.jsx)(ObserveState_1.ObserveState, { listenTo: this.editContext, properties: ["mode"], control: () => ((0, jsx_runtime_1.jsx)(Sidebar_1.Sidebar, { items: this.tabs, value: this.editContext.mode, onChange: (mode) => {
                            Reflect.set(this.editContext, "mode", mode);
                            StateManager_1.StateManager.propertyChanged(this.editContext, "mode");
                        } })) })] }));
    }
}
tslib_1.__decorate([
    AutoBind_1.AutoBind
], TreeRuleBuilder.prototype, "onChangeRuleName", null);
exports.TreeRuleBuilder = TreeRuleBuilder;
//# sourceMappingURL=TreeRuleBuilder.js.map