import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import React from "react";
import Xarrow from "@appglue/xarrow/lib";
import styled from "styled-components";
import { ColorIcon } from "../../../CommonUI/Icon/ColorIcon";
import { DeleteGrayIcon } from "../../../CommonUI/Icon/DeleteGrayIcon";
import { PlusBlueIcon } from "../../../CommonUI/Icon/PlusBlueIcon";
import { StateManager } from "../../../CommonUI/StateManagement/StateManager";
import { XExpressionView } from "../../../Expressions/XExpressionView";
import { TreeRuleConstant } from "../Common/TreeRuleConstant";
import { Error } from "../../Table/CommonUI/Error";
import { Connector } from "./Connector";
import { XTreeRuleNode } from "./XTreeRuleNode";
import { ObserveMultiState } from "../../../CommonUI/StateManagement/ObserveMultiState";
import { TestContext } from "../../../Tester/TestContext";
import { ExpressionContext, expressionSettings, ExpressionRenderType } from "../../../Expressions/ExpressionContext";
import { TestingConstants } from "../../../CommonUI/Testing/TestingConstants";
import { ExpressionTestResultColorContext } from "../../../Expressions/Test/ExpressionTestResultColorContext";
export const EvaluationNode = ({ node, editContext, ruleDefinition }) => {
    const testContext = React.useContext(TestContext);
    const onInsert = (isTrue) => {
        ruleDefinition.insert(node, isTrue);
        StateManager.changed(node);
        StateManager.changed(ruleDefinition);
    };
    const onDelete = () => {
        node.delete();
        StateManager.changed(node);
        StateManager.changed(ruleDefinition);
    };
    const onColor = (event) => {
        editContext.setSelectedForColor(node, event.currentTarget);
    };
    if (testContext) {
        const currentTestItem = testContext.findItem(node.expression._id);
        let testcolor;
        if (currentTestItem) {
            if (currentTestItem.result === "true") {
                testcolor = TestingConstants.TEXT_SUCCESS;
            }
            else {
                testcolor = TestingConstants.TEXT_FAIL;
            }
        }
        return (_jsxs(EvaluationNodeRender, { children: [_jsxs(HorizontalRender, { children: [_jsxs(ExpressionRender, Object.assign({ id: node._id, color: node.color, isTestPassed: !!currentTestItem, isError: currentTestItem === null || currentTestItem === void 0 ? void 0 : currentTestItem.isError }, { children: [_jsx("div", Object.assign({ className: "TreeRuleNode-expression" }, { children: _jsx(ExpressionTestResultColorContext.Provider, Object.assign({ value: testcolor }, { children: _jsx(ExpressionContext.Provider, Object.assign({ value: expressionSettings[ExpressionRenderType.TEXT] }, { children: _jsx(XExpressionView, { expression: node.expression, color: {
                                                    expression: "#4050A6",
                                                    result: "#4050A6",
                                                }, hideValidation: true }, void 0) }), void 0) }), void 0) }), void 0),
                                _jsx(Connector, { nodeid: node._id }, void 0)] }), void 0),
                        _jsx(XTreeRuleNode, { node: node.trueNode, editContext: editContext, ruleDefinition: ruleDefinition }, void 0),
                        !!node.trueNode && (_jsx(RightLine, { start: node._id, end: node.trueNode._id, onInsert: () => { }, isTestPassed: !!currentTestItem && currentTestItem.result === "true" }, void 0))] }, void 0),
                _jsxs(VerticalRender, { children: [_jsx(XTreeRuleNode, { node: node.falseNode, editContext: editContext, ruleDefinition: ruleDefinition }, void 0),
                        !!node.falseNode && (_jsx(BottomLine, { start: node._id, end: node.falseNode._id, onInsert: () => { }, isTestPassed: !!currentTestItem && currentTestItem.result === "false" }, void 0))] }, void 0)] }, void 0));
    }
    return (_jsxs(EvaluationNodeRender, { children: [_jsxs(HorizontalRender, { children: [_jsxs(ExpressionRender, Object.assign({ id: node._id, color: node.color }, { children: [_jsx("div", Object.assign({ className: "TreeRuleNode-expression" }, { children: _jsx(XExpressionView, { expression: node.expression, onDone: () => {
                                        StateManager.propertyChanged(node, "expression");
                                        StateManager.changed(ruleDefinition);
                                    }, color: {
                                        expression: "#4050A6",
                                        result: "#4050A6",
                                    }, hideValidation: true }, void 0) }), void 0),
                            _jsx(Error, { issues: node.getDesignValidationIssues() }, void 0),
                            _jsxs("div", Object.assign({ className: "Actions-group" }, { children: [_jsx(StyledButton, Object.assign({ onClick: onColor }, { children: _jsx(ColorIcon, {}, void 0) }), void 0),
                                    ruleDefinition.root !== node && (_jsx(StyledButton, Object.assign({ onClick: onDelete }, { children: _jsx(DeleteGrayIcon, {}, void 0) }), void 0))] }), void 0),
                            _jsx(Connector, { nodeid: node._id }, void 0)] }), void 0),
                    _jsx(XTreeRuleNode, { node: node.trueNode, editContext: editContext, ruleDefinition: ruleDefinition }, void 0),
                    _jsx(ObserveMultiState, { listenTo: [ruleDefinition, node.trueNode], control: () => {
                            if (!node.trueNode)
                                return null;
                            return _jsx(RightLine, { start: node._id, end: node.trueNode._id, onInsert: () => onInsert(true) }, void 0);
                        } }, void 0)] }, void 0),
            _jsxs(VerticalRender, { children: [_jsx(XTreeRuleNode, { node: node.falseNode, editContext: editContext, ruleDefinition: ruleDefinition }, void 0),
                    _jsx(ObserveMultiState, { listenTo: [ruleDefinition, node.falseNode], control: () => {
                            if (!node.falseNode)
                                return null;
                            return (_jsx(BottomLine, { start: node._id, end: node.falseNode._id, onInsert: () => onInsert(false) }, void 0));
                        } }, void 0)] }, void 0)] }, void 0));
};
const RightLine = ({ start, end, onInsert, isTestPassed }) => {
    const testContext = React.useContext(TestContext);
    if (testContext) {
        return (_jsx(Xarrow, { start: `${start}-right`, end: `${end}-left`, path: "straight", color: isTestPassed ? TestingConstants.BORDER_PASSED : TreeRuleConstant.LINE_COLOR, headSize: 5, labels: {
                start: _jsx(RightLineLabel, { children: "True" }, void 0),
            }, strokeWidth: isTestPassed ? 3 : 1, startAnchor: "right", endAnchor: "left", "data-testid": `${start}-${end}` }, void 0));
    }
    return (_jsx(Xarrow, { start: `${start}-right`, end: `${end}-left`, path: "straight", color: TreeRuleConstant.LINE_COLOR, headSize: 5, labels: {
            start: (_jsxs(RightLineLabel, { children: ["True", _jsx(InsertButton, Object.assign({ onClick: () => onInsert(), className: "BtnTreeRuleNode-insert", "data-testid": `${start}-rightline-insert` }, { children: _jsx(PlusBlueIcon, {}, void 0) }), void 0)] }, void 0)),
        }, strokeWidth: 1, startAnchor: "right", endAnchor: "left", "data-testid": `${start}-${end}` }, void 0));
};
const BottomLine = ({ start, end, onInsert, isTestPassed }) => {
    const testContext = React.useContext(TestContext);
    if (testContext) {
        return (_jsx(Xarrow, { start: `${start}-bottom`, end: `${end}-top`, path: "straight", color: isTestPassed ? TestingConstants.BORDER_PASSED : TreeRuleConstant.LINE_COLOR, headSize: 5, labels: {
                middle: _jsx(BottomLineLabel, { children: "False" }, void 0),
            }, strokeWidth: isTestPassed ? 3 : 1, startAnchor: "bottom", endAnchor: "top" }, void 0));
    }
    return (_jsx(Xarrow, { start: `${start}-bottom`, end: `${end}-top`, path: "straight", color: TreeRuleConstant.LINE_COLOR, headSize: 5, labels: {
            middle: (_jsxs(BottomLineLabel, { children: ["False", _jsx(InsertButton, Object.assign({ onClick: () => onInsert(), className: "BtnTreeRuleNode-insert", "data-testid": `${start}-bottomline-insert` }, { children: _jsx(PlusBlueIcon, {}, void 0) }), void 0)] }, void 0)),
        }, strokeWidth: 1, startAnchor: "bottom", endAnchor: "top" }, void 0));
};
const EvaluationNodeRender = styled.div `
    background: transparent;
    box-sizing: border-box;
    border-radius: 7px;

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

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

    padding: 4px;

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

    position: relative;

    &:hover {
        border: 2px solid ${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.BACKGROUND_FAIL : props.color)};

        .ExpressionView-root {
            background: ${(props) => (props.isError ? TestingConstants.BACKGROUND_FAIL : "#fff")};
        }
    }

    .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.div `
    display: flex;
    flex-direction: row;
    color: #35b687;

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

    .BtnTreeRuleNode-insert {
        opacity: 0;
    }

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

    font-family: Inter;
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: 17px;
    letter-spacing: 0px;
    text-align: left;
`;
const BottomLineLabel = styled.div `
    display: flex;
    flex-direction: column;
    color: #ee3e54;

    font-family: Inter;
    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.div `
    cursor: pointer;
`;
const HorizontalRender = styled.div `
    display: flex;
    flex-direction: row;
    align-items: flex-start;
`;
const VerticalRender = styled.div `
    display: flex;
    margin-top: ${TreeRuleConstant.DIFF_FALSE_Y}px;
`;
export const StyledButton = styled.div `
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;

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