import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import React from "react";
import styled from "styled-components";
import { Xwrapper } from "@appglue/xarrow/lib";
import { ColorPicker } from "../../../CommonUI/BuildUI/ColorPicker";
import { DataTypePicker } from "../../../CommonUI/DataTypePicker";
import { ObserveState } from "../../../CommonUI/StateManagement/ObserveState";
import { StateManager } from "../../../CommonUI/StateManagement/StateManager";
import { RuleDesignerRender, RuleToolbarRender } from "../../DesignUI/CommonStyles";
import { TreeRuleConstant } from "../Common/TreeRuleConstant";
import { XTreeRuleNode } from "./XTreeRuleNode";
import { ValidationInformation } from "../../DesignUI/ValidationInformation";
import { TestContext } from "../../../Tester/TestContext";
import { TestResult } from "../../../CommonUI/Testing/TestResult";
export const TreeRuleDesigner = ({ ruleDefinition, editContext }) => {
    const testContext = React.useContext(TestContext);
    if (testContext) {
        return (_jsxs(RuleDesignerRender, Object.assign({ id: TreeRuleConstant.DESIGN_SURFACE_ID }, { children: [_jsx(RuleEditorDesigner, { children: _jsx(Xwrapper, { children: _jsx(XTreeRuleNode, { node: ruleDefinition._root, editContext: editContext, ruleDefinition: ruleDefinition }, void 0) }, void 0) }, void 0),
                _jsx(TestResult, { executableId: ruleDefinition._id }, void 0)] }), void 0));
    }
    return (_jsxs(RuleDesignerRender, Object.assign({ id: TreeRuleConstant.DESIGN_SURFACE_ID }, { children: [_jsx(RuleToolbarRender, { children: _jsx(DataTypePicker, { dataDef: ruleDefinition.getRuleResult(), updateCallback: (newType) => {
                        ruleDefinition.executionResult = newType;
                        StateManager.changed(ruleDefinition);
                    }, readonly: !ruleDefinition.canChangeOutputs }, void 0) }, void 0),
            _jsx(RuleEditorDesigner, { children: _jsx(XTreeRuleNode, { node: ruleDefinition._root, editContext: editContext, ruleDefinition: ruleDefinition }, void 0) }, void 0),
            _jsx(ObserveState, { listenTo: ruleDefinition, control: () => _jsx(ValidationInformation, { provider: ruleDefinition }, void 0) }, void 0),
            _jsx(ObserveState, { listenTo: editContext, properties: ["selectedForColor"], control: () => {
                    if (!editContext.selectedForColor)
                        return null;
                    return (_jsx(ColorPicker, { onClose: () => {
                            editContext.selectedForColor = undefined;
                        }, onChange: (color) => {
                            editContext.selectedForColor.instance.color = color;
                            StateManager.propertyChanged(editContext.selectedForColor.instance, "color");
                            editContext.selectedForColor = undefined;
                        }, value: editContext.selectedForColor.instance.color, position: editContext.selectedForColor.position }, void 0));
                } }, void 0)] }), void 0));
};
const RuleEditorDesigner = styled.div `
    padding-left: 36px;
    padding-top: 36px;

    flex: 1;
    overflow: auto;

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