"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.PropertyEditorExpression = void 0;
const tslib_1 = require("tslib");
const jsx_runtime_1 = require("react/jsx-runtime");
const react_1 = require("react");
const styled_components_1 = tslib_1.__importDefault(require("styled-components"));
const ExpressionBuilder_1 = require("../../Expressions/ExpressionBuilder");
const UILayer_1 = require("../BuildlingBlocks/UILayer");
const Link_1 = require("../BuilderUI/Link");
const PropertyEditorExpression = (props) => {
    const expression = Reflect.get(props.editObject, props.propertyName);
    expression.executionResult = () => props.resultType;
    expression.inputData = props.inputDataFunction;
    const [open, setOpen] = (0, react_1.useState)(false);
    return ((0, jsx_runtime_1.jsxs)(PropertyEditorExpressionRender, { children: [(0, jsx_runtime_1.jsx)(Link_1.StyledLink, { onClick: () => setOpen(true), size: "small", children: `Edit ${props.propertyName}` }), (0, jsx_runtime_1.jsx)(UILayer_1.UILayer, { open: open, maxWidth: false, renderUI: () => ((0, jsx_runtime_1.jsx)(ExpressionLayer, { children: (0, jsx_runtime_1.jsx)(ExpressionBuilder_1.ExpressionBuilder, { expression: expression, onUpdate: props.updateCallback }) })), onClose: () => setOpen(false), showCloseButton: true })] }));
};
exports.PropertyEditorExpression = PropertyEditorExpression;
const PropertyEditorExpressionRender = styled_components_1.default.div `
    display: flex;
    flex-direction: column;
    justify-content: center;
`;
const ExpressionLayer = styled_components_1.default.div `
    min-width: 800px;
    min-height: 500px;
    position: relative;
`;
//# sourceMappingURL=PropertyEditorExpression.js.map