import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
import React from "react";
import styled from "styled-components";
import { XValueOrExpressionEditor } from "../../../CommonUI/DataEditing/XValueOrExpressionEditor";
import { ObserveState } from "../../../CommonUI/StateManagement/ObserveState";
import { Error } from "../../Table/CommonUI/Error";
import { StateManager } from "../../../CommonUI/StateManagement/StateManager";
import { TestContext } from "../../../Tester/TestContext";
import { XExpressionView } from "../../../Expressions/XExpressionView";
import { TestingConstants } from "../../../CommonUI/Testing/TestingConstants";
import { ExpressionTestResultColorContext } from "../../../Expressions/Test/ExpressionTestResultColorContext";
import { ExpressionContext, ExpressionRenderType, expressionSettings } from "../../../Expressions/ExpressionContext";
import { PassedTestRow } from "../../Table/CommonStyles";
export const IntersectionRuleResult = ({ resultCell, ruleDefinition, x, y }) => {
    const testContext = React.useContext(TestContext);
    const onUpdate = (newValue) => {
        resultCell.setValue(newValue);
        StateManager.changed(ruleDefinition);
        StateManager.propertyChanged(resultCell, "resultExpression");
    };
    if (testContext) {
        const issues = resultCell.getDesignValidationIssues();
        const resulttestitem = testContext.findItem(resultCell.resultExpression._id);
        let testcolor;
        let borderColor;
        let backgroundColor;
        if (resulttestitem) {
            testcolor = TestingConstants.TEXT_SUCCESS;
            borderColor = TestingConstants.BORDER_SUCCESS;
        }
        if (resulttestitem === null || resulttestitem === void 0 ? void 0 : resulttestitem.isError) {
            backgroundColor = TestingConstants.BACKGROUND_FAIL;
            borderColor = TestingConstants.BORDER_FAIL;
        }
        return (_jsxs(ExpressionTestResultColorContext.Provider, Object.assign({ value: testcolor }, { children: [!!resulttestitem && _jsx(PassedTestRow, { x: 1, columnsSpan: x + 4, y: y + 2 }, void 0),
                !!resulttestitem && _jsx(PassedTestColumns, { x: x + 3, rowsSpan: y + 3, y: 1 }, void 0),
                _jsx(ExpressionContext.Provider, Object.assign({ value: expressionSettings[ExpressionRenderType.TEXT] }, { children: _jsxs(ResultColumnRender, Object.assign({ backgroundColor: backgroundColor, borderColor: borderColor, x: x + 3, y: y + 2 }, { children: [_jsx(XExpressionView, { expression: resultCell.resultExpression, hideValidation: true, color: {
                                    expression: "#4050A6",
                                    value: "rgba(39, 41, 50, 0.3)",
                                    variable: "#272932",
                                    missing: "rgba(39, 41, 50, 0.3)",
                                } }, void 0),
                            _jsx(Error, { issues: issues }, void 0)] }), void 0) }), void 0)] }), void 0));
    }
    return (_jsx(ResultColumnRender, { children: _jsx(ObserveState, { listenTo: resultCell, properties: ["resultExpression"], control: () => {
                const issues = resultCell.getDesignValidationIssues();
                return (_jsxs(_Fragment, { children: [_jsx(XValueOrExpressionEditor, { expression: resultCell.resultExpression, onUpdate: onUpdate, hideValidation: true }, void 0),
                        _jsx(Error, { issues: issues }, void 0)] }, void 0));
            } }, void 0) }, void 0));
};
const ResultColumnRender = styled.div `
    position: relative;

    background: ${(props) => props.backgroundColor || "#fff"};
    border-radius: 2px;
    position: relative;

    color: rgba(39, 41, 50, 0.3);

    ${(props) => props.selected
    ? `border: 1px solid ${props.borderColor || "#3E9BDE"}`
    : `border: 1px solid ${props.borderColor || "#F1F1F6"}`};

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

    ${(props) => props.x !== undefined
    ? `
                grid-column-start: ${props.x + 1};
                grid-column-end: ${props.x + 2};
            `
    : ``}
    ${(props) => props.y !== undefined
    ? `
                grid-row-start: ${props.y + 1};
                grid-row-end: ${props.y + 2};
            `
    : ``}

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

        .ValueEditor-display {
            padding: 6px 12px;
        }
    }
`;
const PassedTestColumns = styled.div `
    border: 2px solid ${TestingConstants.BORDER_SUCCESS};

    margin: -4px;

    grid-column-start: ${(props) => props.x + 1};
    grid-column-end: ${(props) => props.x + 2};

    grid-row-start: ${(props) => props.y || 1};
    grid-row-end: ${(props) => (props.y || 1) + props.rowsSpan};
`;
//# sourceMappingURL=IntersectionRuleResult.js.map