"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.IntersectionRuleColumn = 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 ApplyIcon_1 = require("../../../CommonUI/Icon/ApplyIcon");
const DeleteGrayIcon_1 = require("../../../CommonUI/Icon/DeleteGrayIcon");
const ObserveState_1 = require("../../../CommonUI/StateManagement/ObserveState");
const StateManager_1 = require("@appglue/common/dist/Common/StateManager");
const TestingConstants_1 = require("../../../CommonUI/Testing/TestingConstants");
const ExpressionReactContext_1 = require("../../../Expressions/Structure/ExpressionReactContext");
const ExpressionTestResultColorContext_1 = require("../../../Expressions/Testing/ExpressionTestResultColorContext");
const ExpressionView_1 = require("../../../Expressions/Builder/ExpressionView");
const TestContext_1 = require("../../../CommonUI/Testing/TestContext");
const CommonStyles_1 = require("../../Table/CommonStyles");
const Error_1 = require("../../Table/CommonUI/Error");
const ConfirmDialog_1 = require("../../../CommonUI/ConfirmDialog");
const DataUtilities_1 = require("@appglue/common/dist/Common/DataUtilities");
const UIStyleConstants_1 = require("@appglue/common/dist/Common/UIStyleConstants");
const IntersectionRuleColumn = (props) => {
    const testContext = react_1.default.useContext(TestContext_1.TestContext);
    const [open, setOpen] = react_1.default.useState(false);
    const onRemove = () => {
        if (props.expression.isEmpty || DataUtilities_1.DataUtilities.getCookie("INTERSECTION_RULE_DELETE_CONFIRM") === "true") {
            props.ruleDefinition.removeExpression(props.expression, props.direction);
            if (props.direction === "x") {
                StateManager_1.StateManager.propertyChanged(props.ruleDefinition, "xaxisExpressions");
            }
            else {
                StateManager_1.StateManager.propertyChanged(props.ruleDefinition, "yaxisExpressions");
            }
        }
        else {
            setOpen(true);
        }
    };
    if (testContext) {
        const issues = props.expression.getDesignValidationIssues();
        const rulecolumnitem = testContext.findItem(props.expression._id);
        let testcolor;
        let borderColor;
        let backgroundColor;
        if (rulecolumnitem?.result === "true") {
            testcolor = TestingConstants_1.TestingConstants.TEXT_SUCCESS;
            borderColor = TestingConstants_1.TestingConstants.BORDER_SUCCESS;
        }
        else if (rulecolumnitem?.result === "false") {
            testcolor = TestingConstants_1.TestingConstants.TEXT_FAIL;
            borderColor = TestingConstants_1.TestingConstants.BORDER_FAIL;
        }
        if (rulecolumnitem?.isError) {
            backgroundColor = TestingConstants_1.TestingConstants.BACKGROUND_FAIL;
            borderColor = TestingConstants_1.TestingConstants.BORDER_FAIL;
        }
        return ((0, jsx_runtime_1.jsx)(ExpressionTestResultColorContext_1.ExpressionTestResultColorContext.Provider, { value: testcolor, children: (0, jsx_runtime_1.jsxs)(IntersectionRuleColumnRender, { borderColor: borderColor, backgroundColor: backgroundColor, x: props.direction === "x" ? props.index + 3 : 1, y: props.direction === "y" ? props.index + 2 : 0, children: [rulecolumnitem?.result === "true" && ((0, jsx_runtime_1.jsx)(PassedRender, { direction: props.direction, children: (0, jsx_runtime_1.jsx)(ApplyIcon_1.ApplyIcon, {}) })), (0, jsx_runtime_1.jsx)(ExpressionReactContext_1.ExpressionReactContext.Provider, { value: ExpressionReactContext_1.expressionSettings[ExpressionReactContext_1.ExpressionRenderType.TEXT], children: (0, jsx_runtime_1.jsx)(ExpressionView_1.ExpressionView, { ...props, hideValidation: true, color: {
                                expression: UIStyleConstants_1.UIStyleConstants.BLUE_COLOR,
                                value: UIStyleConstants_1.UIStyleConstants.GRAY_DARK_COLOR,
                                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.jsxs)(IntersectionRuleColumnRender, { children: [(0, jsx_runtime_1.jsx)(ObserveState_1.ObserveState, { listenTo: props.expression, control: () => {
                    const issues = props.expression.getDesignValidationIssues();
                    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(ExpressionView_1.ExpressionView, { ...props, hideValidation: true, color: {
                                    expression: UIStyleConstants_1.UIStyleConstants.BLUE_COLOR,
                                    value: UIStyleConstants_1.UIStyleConstants.GRAY_DARK_COLOR,
                                    variable: UIStyleConstants_1.UIStyleConstants.GRAY_DARK_COLOR,
                                    missing: "rgba(39, 41, 50, 0.3)",
                                }, onDone: () => {
                                    StateManager_1.StateManager.changed(props.expression);
                                    StateManager_1.StateManager.changed(props.ruleDefinition);
                                } }), (0, jsx_runtime_1.jsx)(Error_1.Error, { issues: issues })] }));
                } }), (0, jsx_runtime_1.jsxs)(CommonStyles_1.EditColumnWrapper, { className: "edit-wrapper", children: [props.direction === "x" && props.ruleDefinition.xaxisExpressions.length > 1 && ((0, jsx_runtime_1.jsx)(CommonStyles_1.EditColumnAction, { onClick: onRemove, children: (0, jsx_runtime_1.jsx)(DeleteGrayIcon_1.DeleteGrayIcon, {}) })), props.direction === "y" && props.ruleDefinition.yaxisExpressions.length > 1 && ((0, jsx_runtime_1.jsx)(CommonStyles_1.EditColumnAction, { onClick: onRemove, children: (0, jsx_runtime_1.jsx)(DeleteGrayIcon_1.DeleteGrayIcon, {}) }))] }), (0, jsx_runtime_1.jsx)(ConfirmDialog_1.ConfirmDialog, { open: open, onConfirm: (dontAskAgain) => {
                    if (dontAskAgain) {
                        DataUtilities_1.DataUtilities.setCookieValue("INTERSECTION_RULE_DELETE_CONFIRM", "true");
                    }
                    props.ruleDefinition.removeExpression(props.expression, props.direction);
                    if (props.direction === "x") {
                        StateManager_1.StateManager.propertyChanged(props.ruleDefinition, "xaxisExpressions");
                    }
                    else {
                        StateManager_1.StateManager.propertyChanged(props.ruleDefinition, "yaxisExpressions");
                    }
                }, onCancel: () => setOpen(false) })] }));
};
exports.IntersectionRuleColumn = IntersectionRuleColumn;
const IntersectionRuleColumnRender = styled_components_1.default.div `
    position: relative;
    min-width: 120px;
    min-height: 44px;

    width: 100%;
    height: 100%;

    background: ${(props) => props.backgroundColor || UIStyleConstants_1.UIStyleConstants.WHITE_COLOR};
    border: 1px solid ${(props) => props.borderColor || UIStyleConstants_1.UIStyleConstants.BLUE_COLOR};
    box-sizing: border-box;
    border-radius: 2px;

    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_components_1.default.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