"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.ResultRuleNode = void 0;
const tslib_1 = require("tslib");
const jsx_runtime_1 = require("react/jsx-runtime");
const react_1 = tslib_1.__importStar(require("react"));
const styled_components_1 = tslib_1.__importDefault(require("styled-components"));
const react_xarrows_1 = require("react-xarrows");
const XValueOrExpressionEditor_1 = require("../../../CommonUI/DataEditing/XValueOrExpressionEditor");
const ColorIcon_1 = require("../../../CommonUI/Icon/ColorIcon");
const EditGrayIcon_1 = require("../../../CommonUI/Icon/EditGrayIcon");
const DeleteGrayIcon_1 = require("../../../CommonUI/Icon/DeleteGrayIcon");
const StateManager_1 = require("@appglue/common/dist/Common/StateManager");
const ExpressionConfiguration_1 = require("@appglue/common/dist/Expressions/ExpressionConfiguration");
const EvaluationNode_1 = require("./EvaluationNode");
const Error_1 = require("../../Table/CommonUI/Error");
const Connector_1 = require("./Connector");
const ObserveState_1 = require("../../../CommonUI/StateManagement/ObserveState");
const TestContext_1 = require("../../../CommonUI/Testing/TestContext");
const ExpressionReactContext_1 = require("../../../Expressions/Structure/ExpressionReactContext");
const ExpressionTestResultColorContext_1 = require("../../../Expressions/Testing/ExpressionTestResultColorContext");
const TestingConstants_1 = require("../../../CommonUI/Testing/TestingConstants");
const ConfirmDialog_1 = require("../../../CommonUI/ConfirmDialog");
const DataUtilities_1 = require("@appglue/common/dist/Common/DataUtilities");
const TreeRuleConstant_1 = require("@appglue/common/dist/Rule/Tree/Common/TreeRuleConstant");
const ResultRuleNode = ({ node, ruleDefinition, treeRuleBuilder }) => {
    const testContext = react_1.default.useContext(TestContext_1.TestContext);
    const updateXarrow = (0, react_xarrows_1.useXarrow)();
    const [openEditLayer, setOpenEditLayer] = (0, react_1.useState)(false);
    const [openConfirmDialog, setOpenConfirmDialog] = (0, react_1.useState)(false);
    const onDelete = () => {
        if (node.expression.isEmpty ||
            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);
        }
    };
    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)(ResultRuleNodeRender, { id: node._id, isTestPassed: !!currentTestItem, children: [(0, jsx_runtime_1.jsx)(ValueOrExpressionEditorRender, { color: node.color, 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)(XValueOrExpressionEditor_1.XValueOrExpressionEditor, { expression: node.expression, onUpdate: updateXarrow }) }) }) }), (0, jsx_runtime_1.jsx)(Error_1.Error, { issues: node.getDesignValidationIssues() }), (0, jsx_runtime_1.jsx)(Connector_1.Connector, { nodeid: node._id })] }));
    }
    return ((0, jsx_runtime_1.jsxs)(ResultRuleNodeRender, { id: node._id, children: [(0, jsx_runtime_1.jsx)(ObserveState_1.ObserveState, { listenTo: ruleDefinition, control: () => {
                    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(ValueOrExpressionEditorRender, { color: node.color, children: (0, jsx_runtime_1.jsx)(XValueOrExpressionEditor_1.XValueOrExpressionEditor, { expression: node.expression, onUpdate: (newValue) => {
                                        if (newValue instanceof ExpressionConfiguration_1.ExpressionConfiguration) {
                                        }
                                        else {
                                            node.expression.expressionRoot.value = newValue;
                                        }
                                        StateManager_1.StateManager.propertyChanged(node, "expression");
                                    }, open: openEditLayer, onClose: () => setOpenEditLayer(false) }) }), (0, jsx_runtime_1.jsx)(Error_1.Error, { issues: node.getDesignValidationIssues() })] }));
                } }), (0, jsx_runtime_1.jsx)(Connector_1.Connector, { nodeid: node._id }), (0, jsx_runtime_1.jsxs)("div", { className: "Actions-group", children: [(0, jsx_runtime_1.jsx)(EvaluationNode_1.StyledButton, { onClick: onEdit, children: (0, jsx_runtime_1.jsx)(EditGrayIcon_1.EditGrayIcon, {}) }), (0, jsx_runtime_1.jsx)(EvaluationNode_1.StyledButton, { onClick: onColor, children: (0, jsx_runtime_1.jsx)(ColorIcon_1.ColorIcon, {}) }), ruleDefinition.root !== node && ((0, jsx_runtime_1.jsx)(EvaluationNode_1.StyledButton, { onClick: onDelete, children: (0, jsx_runtime_1.jsx)(DeleteGrayIcon_1.DeleteGrayIcon, {}) }))] }), (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.ResultRuleNode = ResultRuleNode;
const ResultRuleNodeRender = styled_components_1.default.div `
    position: relative;

    ${(props) => props.isError
    ? `
                border: 2px solid ${TestingConstants_1.TestingConstants.BORDER_FAIL};
                background: ${TestingConstants_1.TestingConstants.BACKGROUND_FAIL};
            `
    : `border: 2px solid ${props.isTestPassed ? TestingConstants_1.TestingConstants.BORDER_PASSED : "transparent"};`}

    padding: 4px;

    border-radius: 4px;

    &:hover {
        .Actions-group {
            opacity: 1;
        }
    }

    .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 ValueOrExpressionEditorRender = styled_components_1.default.div `
    background: ${(props) => props.color};

    border-radius: 4px;
    border-radius: 4px;

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

    .ValueEditor-root {
        width: 100%;
        padding: 6px 4px;

        .ValueEditor-display {
            padding: 6px 12px;
        }
    }
`;
//# sourceMappingURL=ResultRuleNode.js.map