"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.TreeRuleDesigner = void 0;
const tslib_1 = require("tslib");
const jsx_runtime_1 = require("react/jsx-runtime");
const react_1 = tslib_1.__importDefault(require("react"));
const styled_components_1 = tslib_1.__importDefault(require("styled-components"));
const react_xarrows_1 = require("react-xarrows");
const ColorPicker_1 = require("../../../CommonUI/BuilderUI/ColorPicker");
const DataTypePicker_1 = require("../../../CommonUI/DataTypePicker");
const ObserveState_1 = require("../../../CommonUI/StateManagement/ObserveState");
const StateManager_1 = require("@appglue/common/dist/Common/StateManager");
const CommonStyles_1 = require("../../DesignUI/CommonStyles");
const TreeRuleConstant_1 = require("@appglue/common/dist/Rule/Tree/Common/TreeRuleConstant");
const XTreeRuleNode_1 = require("./XTreeRuleNode");
const ValidationInformation_1 = require("../../DesignUI/ValidationInformation");
const TestContext_1 = require("../../../CommonUI/Testing/TestContext");
const TestResult_1 = require("../../../CommonUI/Testing/TestResult");
const TreeRuleDesigner = ({ ruleDefinition, editContext, treeRuleBuilder }) => {
    const testContext = react_1.default.useContext(TestContext_1.TestContext);
    if (testContext) {
        return ((0, jsx_runtime_1.jsxs)(CommonStyles_1.RuleDesignerRender, { id: TreeRuleConstant_1.TreeRuleConstant.DESIGN_SURFACE_ID, children: [(0, jsx_runtime_1.jsx)(RuleEditorDesigner, { children: (0, jsx_runtime_1.jsx)(react_xarrows_1.Xwrapper, { children: (0, jsx_runtime_1.jsx)(XTreeRuleNode_1.XTreeRuleNode, { node: ruleDefinition._root, editContext: editContext, ruleDefinition: ruleDefinition, treeRuleBuilder: treeRuleBuilder }) }) }), (0, jsx_runtime_1.jsx)(TestResult_1.TestResult, { executableId: ruleDefinition._id })] }));
    }
    return ((0, jsx_runtime_1.jsxs)(CommonStyles_1.RuleDesignerRender, { id: TreeRuleConstant_1.TreeRuleConstant.DESIGN_SURFACE_ID, children: [(0, jsx_runtime_1.jsx)(CommonStyles_1.RuleToolbarRender, { children: (0, jsx_runtime_1.jsx)(DataTypePicker_1.DataTypePicker, { dataDef: ruleDefinition.getRuleResult(), width: "150px", label: "Rule Result Type:", updateCallback: (newType) => {
                        ruleDefinition.executionResult = newType;
                        StateManager_1.StateManager.changed(ruleDefinition);
                    }, readonly: !ruleDefinition.canChangeOutputs }) }), (0, jsx_runtime_1.jsx)(RuleEditorDesigner, { children: (0, jsx_runtime_1.jsx)(react_xarrows_1.Xwrapper, { children: (0, jsx_runtime_1.jsx)(XTreeRuleNode_1.XTreeRuleNode, { node: ruleDefinition._root, editContext: editContext, ruleDefinition: ruleDefinition, treeRuleBuilder: treeRuleBuilder }) }) }), (0, jsx_runtime_1.jsx)(ObserveState_1.ObserveState, { listenTo: ruleDefinition, control: () => (0, jsx_runtime_1.jsx)(ValidationInformation_1.ValidationInformation, { provider: ruleDefinition }) }), (0, jsx_runtime_1.jsx)(ObserveState_1.ObserveState, { listenTo: treeRuleBuilder, properties: ["selectedForColor"], control: () => {
                    if (!treeRuleBuilder || !treeRuleBuilder.selectedForColor)
                        return null;
                    return ((0, jsx_runtime_1.jsx)(ColorPicker_1.ColorPicker, { onClose: () => {
                            treeRuleBuilder.selectedForColor = undefined;
                        }, onChange: (color) => {
                            treeRuleBuilder.selectedForColor.instance.color = color;
                            StateManager_1.StateManager.propertyChanged(treeRuleBuilder.selectedForColor.instance, "color");
                            treeRuleBuilder.selectedForColor = undefined;
                        }, value: treeRuleBuilder.selectedForColor.instance.color, position: treeRuleBuilder.selectedForColor.position }));
                } })] }));
};
exports.TreeRuleDesigner = TreeRuleDesigner;
const RuleEditorDesigner = styled_components_1.default.div `
    padding-left: 36px;
    padding-top: 36px;

    flex: 1;
    overflow: auto;

    position: relative;
`;
//# sourceMappingURL=TreeRuleDesigner.js.map