import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
import React from "react";
import styled from "styled-components";
import { StyledButton } from "../../../CommonUI/Components/Button";
import { Layer } from "../../../CommonUI/Components/Layer";
import { DataTypePicker } from "../../../CommonUI/DataTypePicker";
import { XExpressionEditor } from "../../../Expressions/XExpressionEditor";
export const ExpressionEditUI = ({ expression }) => {
    const [open, setOpen] = React.useState(false);
    return (_jsxs(_Fragment, { children: [_jsx(StyledButton, Object.assign({ color: "primary", variant: "contained", onClick: () => setOpen(true) }, { children: "Edit Expression" }), void 0),
            _jsx(DataTypePicker, { dataDef: expression.getRuleResult(), updateCallback: (newDef) => {
                    expression.executionResult = newDef;
                } }, void 0),
            _jsx(Layer, { open: open, maxWidth: false, renderUI: () => (_jsx(ExpressionLayer, { children: _jsx(XExpressionEditor, { expression: expression }, void 0) }, void 0)), onClose: () => setOpen(false), showCloseButton: true }, void 0)] }, void 0));
};
const ExpressionLayer = styled.div `
    min-width: 800px;
    min-height: 500px;
    position: relative;
`;
//# sourceMappingURL=ExpressionEditUI.js.map