import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
import React from "react";
import styled from "styled-components";
import { useXarrow } from "@appglue/xarrow/lib";
import { XValueOrExpressionEditor } from "../../../CommonUI/DataEditing/XValueOrExpressionEditor";
import { ColorIcon } from "../../../CommonUI/Icon/ColorIcon";
import { DeleteGrayIcon } from "../../../CommonUI/Icon/DeleteGrayIcon";
import { StateManager } from "../../../CommonUI/StateManagement/StateManager";
import { XExpressionDefinition } from "../../../Expressions/XExpressionDefinition";
import { StyledButton } from "./EvaluationNode";
import { Error } from "../../Table/CommonUI/Error";
import { Connector } from "./Connector";
import { ObserveState } from "../../../CommonUI/StateManagement/ObserveState";
import { TestContext } from "../../../Tester/TestContext";
import { expressionSettings, ExpressionRenderType, ExpressionContext } from "../../../Expressions/ExpressionContext";
import { ExpressionTestResultColorContext } from "../../../Expressions/Test/ExpressionTestResultColorContext";
import { TestingConstants } from "../../../CommonUI/Testing/TestingConstants";
export const ResultRuleNode = ({ node, ruleDefinition, editContext }) => {
    const testContext = React.useContext(TestContext);
    const updateXarrow = useXarrow();
    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(ResultRuleNodeRender, Object.assign({ id: node._id, isTestPassed: !!currentTestItem }, { children: [_jsx(ValueOrExpressionEditorRender, Object.assign({ color: node.color }, { children: _jsx(ExpressionTestResultColorContext.Provider, Object.assign({ value: testcolor }, { children: _jsx(ExpressionContext.Provider, Object.assign({ value: expressionSettings[ExpressionRenderType.TEXT] }, { children: _jsx(XValueOrExpressionEditor, { expression: node.expression, onUpdate: updateXarrow }, void 0) }), void 0) }), void 0) }), void 0),
                _jsx(Error, { issues: node.getDesignValidationIssues() }, void 0),
                _jsx(Connector, { nodeid: node._id }, void 0)] }), void 0));
    }
    return (_jsxs(ResultRuleNodeRender, Object.assign({ id: node._id }, { children: [_jsx(ObserveState, { listenTo: ruleDefinition, control: () => {
                    return (_jsxs(_Fragment, { children: [_jsx(ValueOrExpressionEditorRender, Object.assign({ color: node.color }, { children: _jsx(XValueOrExpressionEditor, { expression: node.expression, onUpdate: (newValue) => {
                                        if (newValue instanceof XExpressionDefinition) {
                                        }
                                        else {
                                            node.expression.expressionRoot.value = newValue;
                                        }
                                        StateManager.propertyChanged(node, "expression");
                                    } }, void 0) }), void 0),
                            _jsx(Error, { issues: node.getDesignValidationIssues() }, void 0)] }, void 0));
                } }, void 0),
            _jsx(Connector, { nodeid: node._id }, 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)] }), void 0));
};
const ResultRuleNodeRender = styled.div `
    position: relative;

    ${(props) => props.isError
    ? `
                border: 2px solid ${TestingConstants.BORDER_FAIL};
                background: ${TestingConstants.BACKGROUND_FAIL};
            `
    : `border: 2px solid ${props.isTestPassed ? 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.div `
    background: ${(props) => props.color};

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

    font-family: Inter;
    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