import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { Breadcrumbs } from "@material-ui/core";
import { useCallback, useState, useEffect } from "react";
import styled from "styled-components";
import { StyledLink } from "../../CommonUI/BuildUI/Link";
import { StyledButton } from "../../CommonUI/Components/Button";
import { ExpressionValue } from "../ExpressionValue";
import { XExpressionDefinition } from "../XExpressionDefinition";
import { ExpressionEditContext } from "./ExpressionEditContext";
import { ExpressionRegistration } from "./RegisterExpression";
import { ToolboxPanel } from "./ToolboxPanel";
export const InsertExpressionPage = function (props) {
    var _a, _b;
    const [selectedExpression, setSelectedExpression] = useState(undefined);
    const [posExpressionValue, setPosExpressionValue] = useState(props.expressionValue);
    const [step2, setStep2] = useState(false);
    const handleSelection = useCallback((selected) => {
        if (selectedExpression) {
            props.onComplete(posExpressionValue, selectedExpression, selected);
        }
    }, [selectedExpression, props, posExpressionValue]);
    function onExpressionSelected(registration) {
        let exp = registration.create();
        let context = new ExpressionEditContext(new XExpressionDefinition());
        context.emptyExpressionText = "Select";
        exp.setEditContextWithoutRegister(context);
        setSelectedExpression(exp);
        setStep2(true);
    }
    useEffect(() => {
        if (selectedExpression && selectedExpression.editContext) {
            selectedExpression.editContext.onSelection = handleSelection;
        }
    }, [selectedExpression, handleSelection]);
    if (!step2) {
        return (_jsxs(InsertExpressionViewPanel, { children: [_jsx(InsertExpressionViewPanelLine, Object.assign({ margin: "0 0 10px" }, { children: "Insert Expression - step 1, select expression" }), void 0),
                _jsx(ToolboxPanel, { large: false, expressionValue: props.expressionValue, onExpressionSelected: onExpressionSelected }, void 0)] }, void 0));
    }
    else {
        let type = Reflect.get(selectedExpression, "__type");
        const expression = ExpressionRegistration.getExpressionByType(type, props.expressionValue.editContext.expression.getInputDefinition());
        let parents = ((_b = (_a = props.expressionValue) === null || _a === void 0 ? void 0 : _a.editContext) === null || _b === void 0 ? void 0 : _b.getParents(props.expressionValue._id).reverse()) || [];
        let expressions = [];
        let values = [];
        parents.forEach((p) => {
            if (p instanceof ExpressionValue) {
                values.push(p);
            }
            else {
                expressions.push(p);
            }
        });
        return (_jsxs(InsertExpressionViewPanel, { children: [_jsx(InsertExpressionViewPanelLine, Object.assign({ margin: "0 0 10px" }, { children: "Inserting" }), void 0),
                _jsx(InsertExpressionViewPanelLine, Object.assign({ margin: "0 0 10px" }, { children: _jsx(StyledButton, Object.assign({ size: "small", startIcon: expression === null || expression === void 0 ? void 0 : expression.icon, variant: "outlined", onClick: () => {
                            setStep2(false);
                            setSelectedExpression(undefined);
                        } }, { children: expression === null || expression === void 0 ? void 0 : expression.name }), void 0) }), void 0),
                _jsx(InsertExpressionViewPanelLine, { children: _jsx(Breadcrumbs, Object.assign({ separator: ">" }, { children: expressions.map((e, idx) => (_jsx(StyledLink, Object.assign({ onClick: () => {
                                setPosExpressionValue(values[idx]);
                            }, size: "small" }, { children: e.__type }), idx))) }), void 0) }, void 0),
                _jsx(InsertExpressionViewPanelLineCenter, { children: selectedExpression.render() }, void 0),
                _jsx(InsertExpressionViewPanelLine, { children: _jsx(StyledLink, Object.assign({ size: "small", onClick: props.onCancel }, { children: "Cancel Insertion" }), void 0) }, void 0)] }, void 0));
    }
};
const InsertExpressionViewPanelLineCenter = styled.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.div `
    width: 100%;
    max-height: 376px;
    min-height: 96px;
    padding: 20px 0;
    clear: both;
    display: flex;
    flex-direction: column;
`;
const InsertExpressionViewPanelLine = styled.div `
    width: 100%;
    justify-content: flex-start;
    clear: both;
    font-family: Inter;
    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