import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import styled from "styled-components";
import { RuleDesignerRender, RuleToolbarRender } from "../../DesignUI/CommonStyles";
import { Notification } from "../../../CommonUI/BuildUI/Notification";
import { LinkingDataDialog } from "../../DesignUI/LinkingDataDialog";
import { DataTypePicker } from "../../../CommonUI/DataTypePicker";
import { XExpressionEditor } from "../../../Expressions/XExpressionEditor";
import { StateManager } from "../../../CommonUI/StateManagement/StateManager";
import { ObserveState } from "../../../CommonUI/StateManagement/ObserveState";
export const StatementRuleDesigner = (props) => {
    const { ruleDefinition, editContext } = props;
    return (_jsxs(RuleDesignerRender, { children: [_jsx(RuleToolbarRender, { children: _jsx(DataTypePicker, { dataDef: ruleDefinition.getRuleResult(), readonly: !ruleDefinition.canChangeOutputs, updateCallback: (newType) => {
                        ruleDefinition.executionResult = newType;
                        StateManager.propertyChanged(ruleDefinition, "executionResult");
                    } }, void 0) }, void 0),
            _jsx(RuleEditorWrapper, { children: _jsx(RuleEditorRender, { children: _jsx(ObserveState, { listenTo: ruleDefinition, control: () => (_jsx(XExpressionEditor, { expression: ruleDefinition.expression, onUpdate: () => {
                                StateManager.propertyChanged(ruleDefinition, "expression");
                            } }, void 0)), properties: ["executionResult"] }, void 0) }, void 0) }, void 0),
            _jsx(Notification, { editContext: editContext }, void 0),
            _jsx(LinkingDataDialog, { editContext: editContext }, void 0)] }, void 0));
};
const RuleEditorWrapper = styled.div `
    padding: 16px 24px;
    flex: 1;
`;
const RuleEditorRender = styled.div `
    background: #fff;
    border-radius: 4px;
    padding: 16px 24px;
    width: 800px;
    height: 100%;
`;
//# sourceMappingURL=StatementRuleDesigner.js.map