"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.IntersectionRuleResult = void 0;
const tslib_1 = require("tslib");
const jsx_runtime_1 = require("react/jsx-runtime");
const react_1 = tslib_1.__importDefault(require("react"));
const styled_components_1 = tslib_1.__importDefault(require("styled-components"));
const XValueOrExpressionEditor_1 = require("../../../CommonUI/DataEditing/XValueOrExpressionEditor");
const ObserveState_1 = require("../../../CommonUI/StateManagement/ObserveState");
const Error_1 = require("../../Table/CommonUI/Error");
const StateManager_1 = require("@appglue/common/dist/Common/StateManager");
const TestContext_1 = require("../../../CommonUI/Testing/TestContext");
const ExpressionView_1 = require("../../../Expressions/Builder/ExpressionView");
const TestingConstants_1 = require("../../../CommonUI/Testing/TestingConstants");
const ExpressionTestResultColorContext_1 = require("../../../Expressions/Testing/ExpressionTestResultColorContext");
const ExpressionReactContext_1 = require("../../../Expressions/Structure/ExpressionReactContext");
const CommonStyles_1 = require("../../Table/CommonStyles");
const UIStyleConstants_1 = require("@appglue/common/dist/Common/UIStyleConstants");
const IntersectionRuleResult = ({ resultCell, ruleDefinition, x, y }) => {
    const testContext = react_1.default.useContext(TestContext_1.TestContext);
    const onUpdate = (newValue) => {
        resultCell.setValue(newValue);
        StateManager_1.StateManager.changed(ruleDefinition);
        StateManager_1.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_1.TestingConstants.TEXT_SUCCESS;
            borderColor = TestingConstants_1.TestingConstants.BORDER_SUCCESS;
        }
        if (resulttestitem?.isError) {
            backgroundColor = TestingConstants_1.TestingConstants.BACKGROUND_FAIL;
            borderColor = TestingConstants_1.TestingConstants.BORDER_FAIL;
        }
        return ((0, jsx_runtime_1.jsxs)(ExpressionTestResultColorContext_1.ExpressionTestResultColorContext.Provider, { value: testcolor, children: [!!resulttestitem && (0, jsx_runtime_1.jsx)(CommonStyles_1.PassedTestRow, { x: 1, columnsSpan: x + 4, y: y + 2 }), !!resulttestitem && (0, jsx_runtime_1.jsx)(PassedTestColumns, { x: x + 3, rowsSpan: y + 3, y: 1 }), (0, jsx_runtime_1.jsx)(ExpressionReactContext_1.ExpressionReactContext.Provider, { value: ExpressionReactContext_1.expressionSettings[ExpressionReactContext_1.ExpressionRenderType.TEXT], children: (0, jsx_runtime_1.jsxs)(ResultColumnRender, { backgroundColor: backgroundColor, borderColor: borderColor, x: x + 3, y: y + 2, children: [(0, jsx_runtime_1.jsx)(ExpressionView_1.ExpressionView, { expression: resultCell.resultExpression, hideValidation: true, color: {
                                    expression: UIStyleConstants_1.UIStyleConstants.BLUE_COLOR,
                                    value: "rgba(39, 41, 50, 0.3)",
                                    variable: UIStyleConstants_1.UIStyleConstants.GRAY_DARK_COLOR,
                                    missing: "rgba(39, 41, 50, 0.3)",
                                } }), (0, jsx_runtime_1.jsx)(Error_1.Error, { issues: issues })] }) })] }));
    }
    return ((0, jsx_runtime_1.jsx)(ResultColumnRender, { children: (0, jsx_runtime_1.jsx)(ObserveState_1.ObserveState, { listenTo: resultCell, properties: ["resultExpression"], control: () => {
                const issues = resultCell.getDesignValidationIssues();
                return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(XValueOrExpressionEditor_1.XValueOrExpressionEditor, { expression: resultCell.resultExpression, onUpdate: onUpdate, hideValidation: true }), (0, jsx_runtime_1.jsx)(Error_1.Error, { issues: issues })] }));
            } }) }));
};
exports.IntersectionRuleResult = IntersectionRuleResult;
const ResultColumnRender = styled_components_1.default.div `
    position: relative;

    background: ${(props) => props.backgroundColor || UIStyleConstants_1.UIStyleConstants.WHITE_COLOR};
    border-radius: 2px;
    position: relative;

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

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

    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_components_1.default.div `
    border: 2px solid ${TestingConstants_1.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