import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
import React from "react";
import styled from "styled-components";
import { ApplyIcon } from "../../../CommonUI/Icon/ApplyIcon";
import { DeleteGrayIcon } from "../../../CommonUI/Icon/DeleteGrayIcon";
import { ObserveState } from "../../../CommonUI/StateManagement/ObserveState";
import { StateManager } from "../../../CommonUI/StateManagement/StateManager";
import { TestingConstants } from "../../../CommonUI/Testing/TestingConstants";
import { ExpressionContext, ExpressionRenderType, expressionSettings } from "../../../Expressions/ExpressionContext";
import { ExpressionTestResultColorContext } from "../../../Expressions/Test/ExpressionTestResultColorContext";
import { XExpressionView } from "../../../Expressions/XExpressionView";
import { TestContext } from "../../../Tester/TestContext";
import { EditColumnAction, EditColumnWrapper } from "../../Table/CommonStyles";
import { Error } from "../../Table/CommonUI/Error";
export const IntersectionRuleColumn = (props) => {
    const testContext = React.useContext(TestContext);
    const onRemove = () => {
        props.ruleDefinition.removeExpression(props.expression, props.direction);
        if (props.direction === "x") {
            StateManager.propertyChanged(props.ruleDefinition, "xaxisExpressions");
        }
        else {
            StateManager.propertyChanged(props.ruleDefinition, "yaxisExpressions");
        }
    };
    if (testContext) {
        const issues = props.expression.getDesignValidationIssues();
        const rulecolumnitem = testContext.findItem(props.expression._id);
        let testcolor;
        let borderColor;
        let backgroundColor;
        if ((rulecolumnitem === null || rulecolumnitem === void 0 ? void 0 : rulecolumnitem.result) === "true") {
            testcolor = TestingConstants.TEXT_SUCCESS;
            borderColor = TestingConstants.BORDER_SUCCESS;
        }
        else if ((rulecolumnitem === null || rulecolumnitem === void 0 ? void 0 : rulecolumnitem.result) === "false") {
            testcolor = TestingConstants.TEXT_FAIL;
            borderColor = TestingConstants.BORDER_FAIL;
        }
        if (rulecolumnitem === null || rulecolumnitem === void 0 ? void 0 : rulecolumnitem.isError) {
            backgroundColor = TestingConstants.BACKGROUND_FAIL;
            borderColor = TestingConstants.BORDER_FAIL;
        }
        return (_jsx(ExpressionTestResultColorContext.Provider, Object.assign({ value: testcolor }, { children: _jsxs(IntersectionRuleColumnRender, Object.assign({ borderColor: borderColor, backgroundColor: backgroundColor, x: props.direction === "x" ? props.index + 3 : 1, y: props.direction === "y" ? props.index + 2 : 0 }, { children: [(rulecolumnitem === null || rulecolumnitem === void 0 ? void 0 : rulecolumnitem.result) === "true" && (_jsx(PassedRender, Object.assign({ direction: props.direction }, { children: _jsx(ApplyIcon, {}, void 0) }), void 0)),
                    _jsx(ExpressionContext.Provider, Object.assign({ value: expressionSettings[ExpressionRenderType.TEXT] }, { children: _jsx(XExpressionView, Object.assign({}, props, { hideValidation: true, color: {
                                expression: "#4050A6",
                                value: "#272932",
                                variable: "#272932",
                                missing: "rgba(39, 41, 50, 0.3)",
                            } }), void 0) }), void 0),
                    _jsx(Error, { issues: issues }, void 0)] }), void 0) }), void 0));
    }
    return (_jsxs(IntersectionRuleColumnRender, { children: [_jsx(ObserveState, { listenTo: props.expression, control: () => {
                    const issues = props.expression.getDesignValidationIssues();
                    return (_jsxs(_Fragment, { children: [_jsx(XExpressionView, Object.assign({}, props, { hideValidation: true, color: {
                                    expression: "#4050A6",
                                    value: "#272932",
                                    variable: "#272932",
                                    missing: "rgba(39, 41, 50, 0.3)",
                                }, onDone: () => {
                                    StateManager.changed(props.expression);
                                    StateManager.changed(props.ruleDefinition);
                                } }), void 0),
                            _jsx(Error, { issues: issues }, void 0)] }, void 0));
                } }, void 0),
            _jsxs(EditColumnWrapper, Object.assign({ className: "edit-wrapper" }, { children: [props.direction === "x" && props.ruleDefinition.xaxisExpressions.length > 1 && (_jsx(EditColumnAction, Object.assign({ onClick: onRemove }, { children: _jsx(DeleteGrayIcon, {}, void 0) }), void 0)),
                    props.direction === "y" && props.ruleDefinition.yaxisExpressions.length > 1 && (_jsx(EditColumnAction, Object.assign({ onClick: onRemove }, { children: _jsx(DeleteGrayIcon, {}, void 0) }), void 0))] }), void 0)] }, void 0));
};
const IntersectionRuleColumnRender = styled.div `
    position: relative;
    min-width: 120px;
    min-height: 44px;

    width: 100%;
    height: 100%;

    background: ${(props) => props.backgroundColor || "#ffffff"};
    border: 1px solid ${(props) => props.borderColor || "#4050a6"};
    box-sizing: border-box;
    border-radius: 2px;

    font-family: Inter;
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: 17px;
    letter-spacing: 0px;
    text-align: left;
    color: rgba(39, 41, 50);

    ${(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};
            `
    : ``}

    .edit-wrapper {
        opacity: 0;
        z-index: 2;
    }

    &:hover .edit-wrapper {
        opacity: 1;
    }
`;
const PassedRender = styled.div `
    position: absolute;

    ${(props) => props.direction === "x"
    ? `
                bottom: 100%;
                left: 50%;
                transform: translateX(-50%);
                
            `
    : `
                right: calc(100% + 36px);
                top: 50%;
                transform: translateY(-50%);
            `}
`;
//# sourceMappingURL=IntersectionRuleColumn.js.map