"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.StyledButton = exports.EvaluationNode = void 0;
const tslib_1 = require("tslib");
const jsx_runtime_1 = require("react/jsx-runtime");
const react_1 = tslib_1.__importStar(require("react"));
const react_xarrows_1 = tslib_1.__importDefault(require("react-xarrows"));
const styled_components_1 = tslib_1.__importDefault(require("styled-components"));
const ColorIcon_1 = require("../../../CommonUI/Icon/ColorIcon");
const DeleteGrayIcon_1 = require("../../../CommonUI/Icon/DeleteGrayIcon");
const PlusBlueIcon_1 = require("../../../CommonUI/Icon/PlusBlueIcon");
const EditGrayIcon_1 = require("../../../CommonUI/Icon/EditGrayIcon");
const StateManager_1 = require("@appglue/common/dist/Common/StateManager");
const ExpressionView_1 = require("../../../Expressions/Builder/ExpressionView");
const TreeRuleConstant_1 = require("@appglue/common/dist/Rule/Tree/Common/TreeRuleConstant");
const Error_1 = require("../../Table/CommonUI/Error");
const Connector_1 = require("./Connector");
const XTreeRuleNode_1 = require("./XTreeRuleNode");
const ObserveMultiState_1 = require("../../../CommonUI/StateManagement/ObserveMultiState");
const TestContext_1 = require("../../../CommonUI/Testing/TestContext");
const ExpressionReactContext_1 = require("../../../Expressions/Structure/ExpressionReactContext");
const TestingConstants_1 = require("../../../CommonUI/Testing/TestingConstants");
const ExpressionTestResultColorContext_1 = require("../../../Expressions/Testing/ExpressionTestResultColorContext");
const DataUtilities_1 = require("@appglue/common/dist/Common/DataUtilities");
const ConfirmDialog_1 = require("../../../CommonUI/ConfirmDialog");
const TreeRuleNode_1 = require("@appglue/common/dist/Rule/Tree/Structure/TreeRuleNode");
const UIStyleConstants_1 = require("@appglue/common/dist/Common/UIStyleConstants");
const EvaluationNode = ({ node, editContext, treeRuleBuilder, ruleDefinition }) => {
    const testContext = react_1.default.useContext(TestContext_1.TestContext);
    const [mounted, setMounted] = react_1.default.useState(false);
    const [openEditLayer, setOpenEditLayer] = react_1.default.useState(false);
    const [openConfirmDialog, setOpenConfirmDialog] = (0, react_1.useState)(false);
    const onDelete = () => {
        if ((node.expression.isEmpty &&
            node.trueNode.nodeType === TreeRuleNode_1.TreeRuleNodeType.UNDEFINED &&
            node.falseNode.nodeType === TreeRuleNode_1.TreeRuleNodeType.UNDEFINED) ||
            DataUtilities_1.DataUtilities.getCookie(TreeRuleConstant_1.TreeRuleConstant.TREE_RULE_CLEAR_COOKIE_KEY) === "true") {
            node.delete();
            StateManager_1.StateManager.changed(node);
            StateManager_1.StateManager.changed(ruleDefinition);
        }
        else {
            setOpenConfirmDialog(true);
        }
    };
    react_1.default.useLayoutEffect(() => {
        setTimeout(() => {
            setMounted(true);
        }, 100);
    }, []);
    const onInsert = (isTrue) => {
        ruleDefinition.insert(node, isTrue);
        StateManager_1.StateManager.changed(node);
        StateManager_1.StateManager.changed(ruleDefinition);
    };
    const onColor = (event) => {
        treeRuleBuilder?.setSelectedForColor(node, event.currentTarget);
    };
    const onEdit = (event) => {
        event.stopPropagation();
        setOpenEditLayer(true);
    };
    if (testContext) {
        const currentTestItem = testContext.findItem(node.expression._id);
        let testcolor;
        if (currentTestItem) {
            if (currentTestItem.result === "true") {
                testcolor = TestingConstants_1.TestingConstants.TEXT_SUCCESS;
            }
            else {
                testcolor = TestingConstants_1.TestingConstants.TEXT_FAIL;
            }
        }
        return ((0, jsx_runtime_1.jsxs)(EvaluationNodeRender, { children: [(0, jsx_runtime_1.jsxs)(HorizontalRender, { children: [(0, jsx_runtime_1.jsxs)(ExpressionRender, { id: node._id, color: node.color, isTestPassed: !!currentTestItem, isError: currentTestItem?.isError, children: [(0, jsx_runtime_1.jsx)("div", { className: "TreeRuleNode-expression", children: (0, jsx_runtime_1.jsx)(ExpressionTestResultColorContext_1.ExpressionTestResultColorContext.Provider, { value: testcolor, children: (0, jsx_runtime_1.jsx)(ExpressionReactContext_1.ExpressionReactContext.Provider, { value: ExpressionReactContext_1.expressionSettings[ExpressionReactContext_1.ExpressionRenderType.TEXT], children: (0, jsx_runtime_1.jsx)(ExpressionView_1.ExpressionView, { expression: node.expression, color: {
                                                    expression: UIStyleConstants_1.UIStyleConstants.BLUE_COLOR,
                                                    result: UIStyleConstants_1.UIStyleConstants.BLUE_COLOR,
                                                }, hideValidation: true }) }) }) }), (0, jsx_runtime_1.jsx)(Connector_1.Connector, { nodeid: node._id })] }), (0, jsx_runtime_1.jsx)(XTreeRuleNode_1.XTreeRuleNode, { node: node.trueNode, editContext: editContext, treeRuleBuilder: treeRuleBuilder, ruleDefinition: ruleDefinition }), mounted && !!node.trueNode && ((0, jsx_runtime_1.jsx)(RightLine, { start: node._id, end: node.trueNode._id, onInsert: () => { }, isTestPassed: !!currentTestItem && currentTestItem.result === "true" }))] }), (0, jsx_runtime_1.jsxs)(VerticalRender, { children: [(0, jsx_runtime_1.jsx)(XTreeRuleNode_1.XTreeRuleNode, { node: node.falseNode, editContext: editContext, ruleDefinition: ruleDefinition }), !!node.falseNode && ((0, jsx_runtime_1.jsx)(BottomLine, { start: node._id, end: node.falseNode._id, onInsert: () => { }, isTestPassed: !!currentTestItem && currentTestItem.result === "false" }))] })] }));
    }
    return ((0, jsx_runtime_1.jsxs)(EvaluationNodeRender, { children: [(0, jsx_runtime_1.jsxs)(HorizontalRender, { children: [(0, jsx_runtime_1.jsxs)(ExpressionRender, { id: node._id, color: node.color, children: [(0, jsx_runtime_1.jsx)("div", { className: "TreeRuleNode-expression", children: (0, jsx_runtime_1.jsx)(ExpressionView_1.ExpressionView, { expression: node.expression, onDone: () => {
                                        setOpenEditLayer(false);
                                        StateManager_1.StateManager.propertyChanged(node, "expression");
                                        StateManager_1.StateManager.changed(ruleDefinition);
                                    }, color: {
                                        expression: UIStyleConstants_1.UIStyleConstants.BLUE_COLOR,
                                        result: UIStyleConstants_1.UIStyleConstants.BLUE_COLOR,
                                    }, hideValidation: true, open: openEditLayer }) }), (0, jsx_runtime_1.jsx)(Error_1.Error, { issues: node.getDesignValidationIssues() }), (0, jsx_runtime_1.jsxs)("div", { className: "Actions-group", children: [(0, jsx_runtime_1.jsx)(exports.StyledButton, { onClick: onEdit, children: (0, jsx_runtime_1.jsx)(EditGrayIcon_1.EditGrayIcon, {}) }), (0, jsx_runtime_1.jsx)(exports.StyledButton, { onClick: onColor, children: (0, jsx_runtime_1.jsx)(ColorIcon_1.ColorIcon, {}) }), ruleDefinition.root !== node && ((0, jsx_runtime_1.jsx)(exports.StyledButton, { onClick: onDelete, children: (0, jsx_runtime_1.jsx)(DeleteGrayIcon_1.DeleteGrayIcon, {}) }))] }), (0, jsx_runtime_1.jsx)(Connector_1.Connector, { nodeid: node._id })] }), (0, jsx_runtime_1.jsx)(XTreeRuleNode_1.XTreeRuleNode, { node: node.trueNode, editContext: editContext, ruleDefinition: ruleDefinition }), (0, jsx_runtime_1.jsx)(ObserveMultiState_1.ObserveMultiState, { listenTo: [ruleDefinition, node.trueNode], control: () => {
                            if (!node.trueNode)
                                return null;
                            return (0, jsx_runtime_1.jsx)(RightLine, { start: node._id, end: node.trueNode._id, onInsert: () => onInsert(true) });
                        } })] }), (0, jsx_runtime_1.jsxs)(VerticalRender, { children: [(0, jsx_runtime_1.jsx)(XTreeRuleNode_1.XTreeRuleNode, { node: node.falseNode, editContext: editContext, ruleDefinition: ruleDefinition }), (0, jsx_runtime_1.jsx)(ObserveMultiState_1.ObserveMultiState, { listenTo: [ruleDefinition, node.falseNode], control: () => {
                            if (!node.falseNode)
                                return null;
                            return ((0, jsx_runtime_1.jsx)(BottomLine, { start: node._id, end: node.falseNode._id, onInsert: () => onInsert(false) }));
                        } })] }), (0, jsx_runtime_1.jsx)(ConfirmDialog_1.ConfirmDialog, { open: openConfirmDialog, onConfirm: (dontAskAgain) => {
                    if (dontAskAgain) {
                        DataUtilities_1.DataUtilities.setCookieValue(TreeRuleConstant_1.TreeRuleConstant.TREE_RULE_CLEAR_COOKIE_KEY, "true");
                    }
                    node.delete();
                    StateManager_1.StateManager.changed(node);
                    StateManager_1.StateManager.changed(ruleDefinition);
                    setOpenConfirmDialog(false);
                }, onCancel: () => setOpenConfirmDialog(false) })] }));
};
exports.EvaluationNode = EvaluationNode;
const RightLine = ({ start, end, onInsert, isTestPassed }) => {
    const testContext = react_1.default.useContext(TestContext_1.TestContext);
    if (testContext) {
        return ((0, jsx_runtime_1.jsx)(react_xarrows_1.default, { start: `${start}-right`, end: `${end}-left`, path: "straight", color: isTestPassed ? TestingConstants_1.TestingConstants.BORDER_PASSED : TreeRuleConstant_1.TreeRuleConstant.LINE_COLOR, headSize: 5, labels: {
                start: (0, jsx_runtime_1.jsx)(RightLineLabel, { children: "True" }),
            }, strokeWidth: isTestPassed ? 3 : 1, startAnchor: "right", endAnchor: "left", "data-testid": `${start}-${end}` }));
    }
    return ((0, jsx_runtime_1.jsx)(react_xarrows_1.default, { start: `${start}-right`, end: `${end}-left`, path: "straight", color: TreeRuleConstant_1.TreeRuleConstant.LINE_COLOR, headSize: 5, labels: {
            start: ((0, jsx_runtime_1.jsxs)(RightLineLabel, { children: ["True", (0, jsx_runtime_1.jsx)(InsertButton, { onClick: () => onInsert(), className: "BtnTreeRuleNode-insert", "data-testid": `${start}-rightline-insert`, children: (0, jsx_runtime_1.jsx)(PlusBlueIcon_1.PlusBlueIcon, {}) })] })),
        }, strokeWidth: 1, startAnchor: "right", endAnchor: "left", "data-testid": `${start}-${end}` }));
};
const BottomLine = ({ start, end, onInsert, isTestPassed }) => {
    const testContext = react_1.default.useContext(TestContext_1.TestContext);
    if (testContext) {
        return ((0, jsx_runtime_1.jsx)(react_xarrows_1.default, { start: `${start}-bottom`, end: `${end}-top`, path: "straight", color: isTestPassed ? TestingConstants_1.TestingConstants.BORDER_PASSED : TreeRuleConstant_1.TreeRuleConstant.LINE_COLOR, headSize: 5, labels: {
                middle: (0, jsx_runtime_1.jsx)(BottomLineLabel, { children: "False" }),
            }, strokeWidth: isTestPassed ? 3 : 1, startAnchor: "bottom", endAnchor: "top" }));
    }
    return ((0, jsx_runtime_1.jsx)(react_xarrows_1.default, { start: `${start}-bottom`, end: `${end}-top`, path: "straight", color: TreeRuleConstant_1.TreeRuleConstant.LINE_COLOR, headSize: 5, labels: {
            middle: ((0, jsx_runtime_1.jsxs)(BottomLineLabel, { children: ["False", (0, jsx_runtime_1.jsx)(InsertButton, { onClick: () => onInsert(), className: "BtnTreeRuleNode-insert", "data-testid": `${start}-bottomline-insert`, children: (0, jsx_runtime_1.jsx)(PlusBlueIcon_1.PlusBlueIcon, {}) })] })),
        }, strokeWidth: 1, startAnchor: "bottom", endAnchor: "top" }));
};
const EvaluationNodeRender = styled_components_1.default.div `
    background: transparent;
    box-sizing: border-box;
    border-radius: 7px;

    display: flex;
    flex-direction: column;
`;
const ExpressionRender = styled_components_1.default.div `
    ${(props) => props.isError
    ? `
                border: 2px solid ${TestingConstants_1.TestingConstants.BORDER_FAIL};
                background: ${TestingConstants_1.TestingConstants.BACKGROUND_FAIL};
            `
    : props.isTestPassed
        ? `border: 2px solid ${TestingConstants_1.TestingConstants.BORDER_PASSED}`
        : `border: 2px solid transparent;`};

    box-sizing: border-box;
    border-radius: 4px;

    padding: 4px;

    margin-right: ${TreeRuleConstant_1.TreeRuleConstant.DIFF_TRUE_X}px;

    position: relative;

    &:hover {
        border: 2px solid ${TreeRuleConstant_1.TreeRuleConstant.SELECTED_NODE_BORDER_COLOR};

        .Actions-group {
            opacity: 1;
        }
    }

    .TreeRuleNode-expression {
        padding: 0 4px;
        border: 1px solid rgba(64, 80, 166, 0.5);
        border-radius: 4px;

        background: ${(props) => (props.isError ? TestingConstants_1.TestingConstants.BACKGROUND_FAIL : props.color)};

        .ExpressionView-root {
            background: ${(props) => (props.isError ? TestingConstants_1.TestingConstants.BACKGROUND_FAIL : UIStyleConstants_1.UIStyleConstants.WHITE_COLOR)};
        }
    }

    .Actions-group {
        opacity: 0;

        transition: opacity 0.1s ease-in;

        background: #ffffff;
        border: 1px solid #f1f1f6;
        box-sizing: border-box;
        border-radius: 4px;

        display: flex;
        align-items: center;

        position: absolute;

        right: 0;
        top: -30px;
    }
`;
const RightLineLabel = styled_components_1.default.div `
    display: flex;
    flex-direction: row;
    color: #35b687;

    .BtnTreeRuleNode-insert {
        margin-left: 20px;
    }

    .BtnTreeRuleNode-insert {
        opacity: 0;
    }

    &:hover .BtnTreeRuleNode-insert {
        opacity: 1;
    }

    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: 17px;
    letter-spacing: 0px;
    text-align: left;
`;
const BottomLineLabel = styled_components_1.default.div `
    display: flex;
    flex-direction: column;
    color: ${UIStyleConstants_1.UIStyleConstants.RED_COLOR};

    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: 17px;
    letter-spacing: 0px;
    text-align: left;

    .BtnTreeRuleNode-insert {
        margin-top: 20px;
    }

    .BtnTreeRuleNode-insert {
        opacity: 0;
    }

    &:hover .BtnTreeRuleNode-insert {
        opacity: 1;
    }
`;
const InsertButton = styled_components_1.default.div `
    cursor: pointer;
`;
const HorizontalRender = styled_components_1.default.div `
    display: flex;
    flex-direction: row;
    align-items: flex-start;
`;
const VerticalRender = styled_components_1.default.div `
    display: flex;
    margin-top: ${TreeRuleConstant_1.TreeRuleConstant.DIFF_FALSE_Y}px;
`;
exports.StyledButton = styled_components_1.default.div `
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;

    cursor: pointer;
`;
//# sourceMappingURL=EvaluationNode.js.map