"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.InsertExpressionPage = void 0;
const tslib_1 = require("tslib");
const jsx_runtime_1 = require("react/jsx-runtime");
const core_1 = require("@material-ui/core");
const react_1 = require("react");
const styled_components_1 = tslib_1.__importDefault(require("styled-components"));
const Link_1 = require("../../CommonUI/BuilderUI/Link");
const StyledButton_1 = require("../../CommonUI/BuildlingBlocks/StyledButton");
const ExpressionValue_1 = require("@appglue/common/dist/Expressions/ExpressionValue");
const ExpressionConfiguration_1 = require("@appglue/common/dist/Expressions/ExpressionConfiguration");
const ExpressionContext_1 = require("@appglue/common/dist/Expressions/ExpressionContext");
const RegisterExpressionRule_1 = require("@appglue/common/dist/Expressions/RegisterExpressionRule");
const ToolboxPanel_1 = require("./ToolboxPanel");
const RegisterExpressionRuleEditor_1 = require("./RegisterExpressionRuleEditor");
const InsertExpressionPage = function (props) {
    const [selectedExpression, setSelectedExpression] = (0, react_1.useState)(undefined);
    const [posExpressionValue, setPosExpressionValue] = (0, react_1.useState)(props.expressionValue);
    const [step2, setStep2] = (0, react_1.useState)(false);
    const handleSelection = (0, react_1.useCallback)((selected) => {
        if (selectedExpression) {
            props.onComplete(posExpressionValue, selectedExpression, selected);
        }
    }, [selectedExpression, props, posExpressionValue]);
    function onExpressionSelected(registration) {
        let exp = registration.create();
        let context = new ExpressionContext_1.ExpressionContext(new ExpressionConfiguration_1.ExpressionConfiguration());
        context.emptyExpressionText = "Select";
        exp.setEditContextWithoutRegister(context);
        setSelectedExpression(exp);
        setStep2(true);
    }
    (0, react_1.useEffect)(() => {
        if (selectedExpression && selectedExpression.expressionContext) {
            selectedExpression.expressionContext.onSelection = handleSelection;
        }
    }, [selectedExpression, handleSelection]);
    if (!step2) {
        return ((0, jsx_runtime_1.jsxs)(InsertExpressionViewPanel, { children: [(0, jsx_runtime_1.jsx)(InsertExpressionViewPanelLine, { margin: "0 0 10px", children: "Insert Expression - step 1, select expression" }), (0, jsx_runtime_1.jsx)(ToolboxPanel_1.ToolboxPanel, { large: false, expressionValue: props.expressionValue, onExpressionSelected: onExpressionSelected })] }));
    }
    else {
        let type = Reflect.get(selectedExpression, "__type");
        const expression = RegisterExpressionRule_1.ExpressionRuleRegistration.getExpressionByType(type, props.expressionValue.editContext.expression.getInputDefinition());
        let parents = props.expressionValue?.editContext?.getParents(props.expressionValue._id).reverse() || [];
        let expressions = [];
        let values = [];
        parents.forEach((p) => {
            if (p instanceof ExpressionValue_1.ExpressionValue) {
                values.push(p);
            }
            else {
                expressions.push(p);
            }
        });
        return ((0, jsx_runtime_1.jsxs)(InsertExpressionViewPanel, { children: [(0, jsx_runtime_1.jsx)(InsertExpressionViewPanelLine, { margin: "0 0 10px", children: "Inserting" }), (0, jsx_runtime_1.jsx)(InsertExpressionViewPanelLine, { margin: "0 0 10px", children: (0, jsx_runtime_1.jsx)(StyledButton_1.StyledButton, { size: "small", startIcon: (0, RegisterExpressionRuleEditor_1.GetExpressionRuleIcon)(expression.type), variant: "outlined", onClick: () => {
                            setStep2(false);
                            setSelectedExpression(undefined);
                        }, children: expression?.name }) }), (0, jsx_runtime_1.jsx)(InsertExpressionViewPanelLine, { children: (0, jsx_runtime_1.jsx)(core_1.Breadcrumbs, { separator: ">", children: expressions.map((e, idx) => ((0, jsx_runtime_1.jsx)(Link_1.StyledLink, { onClick: () => {
                                setPosExpressionValue(values[idx]);
                            }, size: "small", children: e.__type }, idx))) }) }), (0, jsx_runtime_1.jsx)(InsertExpressionViewPanelLineCenter, { children: (0, RegisterExpressionRuleEditor_1.RenderExpressionRule)(selectedExpression) }), (0, jsx_runtime_1.jsx)(InsertExpressionViewPanelLine, { children: (0, jsx_runtime_1.jsx)(Link_1.StyledLink, { size: "small", onClick: props.onCancel, children: "Cancel Insertion" }) })] }));
    }
};
exports.InsertExpressionPage = InsertExpressionPage;
const InsertExpressionViewPanelLineCenter = styled_components_1.default.div `
    display: flex;
    margin-left: auto;
    justify-content: center;
    align-items: center;
    min-height: 150px;
    padding: 15px;
    border-radius: 5px;
    flex: 1;
    overflow: auto;
    width: 100%;
`;
const InsertExpressionViewPanel = styled_components_1.default.div `
    width: 100%;
    max-height: 376px;
    min-height: 96px;
    padding: 20px 0;
    clear: both;
    display: flex;
    flex-direction: column;
`;
const InsertExpressionViewPanelLine = styled_components_1.default.div `
    width: 100%;
    justify-content: flex-start;
    clear: both;

    font-style: normal;
    font-weight: 500;
    font-size: 14px;
    line-height: 20px;
    color: rgba(39, 41, 50, 1);
    text-transform: none;

    margin: ${(props) => props.margin || "0px"};
`;
//# sourceMappingURL=InsertExpressionPage.js.map