"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.IntersectionRuleTitle = exports.IntersectionRuleHeader = 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 IntersectionRuleColumn_1 = require("./IntersectionRuleColumn");
const CommonStyles_1 = require("../../DesignUI/CommonStyles");
const PlusGrayIcon_1 = require("../../../CommonUI/Icon/PlusGrayIcon");
const StateManager_1 = require("@appglue/common/dist/Common/StateManager");
const ObserveState_1 = require("../../../CommonUI/StateManagement/ObserveState");
const TestContext_1 = require("../../../CommonUI/Testing/TestContext");
const UIStyleConstants_1 = require("@appglue/common/dist/Common/UIStyleConstants");
const IntersectionRuleHeader = (props) => {
    const { expressions, ruleDefinition } = props;
    const testContext = react_1.default.useContext(TestContext_1.TestContext);
    const onAddNewXAxisExpression = () => {
        ruleDefinition.addXAxisExpression();
        StateManager_1.StateManager.propertyChanged(ruleDefinition, "xaxisExpressions");
    };
    if (testContext) {
        return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(CommonStyles_1.RuleTableIndexColumn, { x: 0, y: 0 }), (0, jsx_runtime_1.jsx)(exports.IntersectionRuleTitle, { isTest: true, children: "Intersection Table" }), (0, jsx_runtime_1.jsx)(CommonStyles_1.RuleTableHeaderSplit, { height: 44, width: 1, x: 2, y: 0 }), expressions.map((exp, index) => ((0, jsx_runtime_1.jsx)(IntersectionRuleColumn_1.IntersectionRuleColumn, { expression: exp, ruleDefinition: ruleDefinition, direction: "x", index: index }, exp._id))), (0, jsx_runtime_1.jsx)(CommonStyles_1.RuleTableHeaderActionColumn, { "data-testid": "btn-intersectionrule-column-add", disabled: !ruleDefinition.canChangeOutputs }), (0, jsx_runtime_1.jsx)(CommonStyles_1.RuleTableIndexColumn, { height: 1, x: 0, y: 1 }), (0, jsx_runtime_1.jsx)(CommonStyles_1.RuleTableHeaderSplit, { width: 24, x: 1, y: 1 }), (0, jsx_runtime_1.jsx)("div", {}), expressions.map((_, idx) => ((0, jsx_runtime_1.jsx)(CommonStyles_1.RuleTableHeaderSplit, { y: 1, x: idx + 3 }, idx))), (0, jsx_runtime_1.jsx)(CommonStyles_1.RuleTableHeaderSplit, { width: 24 })] }));
    }
    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(CommonStyles_1.RuleTableIndexColumn, {}), (0, jsx_runtime_1.jsx)(exports.IntersectionRuleTitle, { children: "Intersection Table" }), (0, jsx_runtime_1.jsx)(CommonStyles_1.RuleTableHeaderSplit, { height: 44, width: 1 }), expressions.map((exp, index) => ((0, jsx_runtime_1.jsx)(IntersectionRuleColumn_1.IntersectionRuleColumn, { expression: exp, ruleDefinition: ruleDefinition, direction: "x", index: index }, exp._id))), (0, jsx_runtime_1.jsx)(ObserveState_1.ObserveState, { listenTo: ruleDefinition, properties: ["canChangeOutputs"], control: () => ((0, jsx_runtime_1.jsx)(CommonStyles_1.RuleTableHeaderActionColumn, { onClick: onAddNewXAxisExpression, "data-testid": "btn-intersectionrule-column-add", disabled: !ruleDefinition.canChangeOutputs, children: (0, jsx_runtime_1.jsx)(PlusGrayIcon_1.PlusGrayIcon, {}) })) }), (0, jsx_runtime_1.jsx)(CommonStyles_1.RuleTableIndexColumn, { height: 1 }), (0, jsx_runtime_1.jsx)(CommonStyles_1.RuleTableHeaderSplit, { width: 24 }), (0, jsx_runtime_1.jsx)("div", {}), expressions.map((_, idx) => ((0, jsx_runtime_1.jsx)(CommonStyles_1.RuleTableHeaderSplit, {}, idx))), (0, jsx_runtime_1.jsx)(CommonStyles_1.RuleTableHeaderSplit, { width: 24 })] }));
};
exports.IntersectionRuleHeader = IntersectionRuleHeader;
exports.IntersectionRuleTitle = styled_components_1.default.div `
    display: flex;
    align-items: center;
    justify-content: center;

    padding-left: 15px;
    padding-right: 15px;

    font-size: 16px;
    font-style: normal;
    font-weight: 600;
    line-height: 22px;
    letter-spacing: 0em;
    text-align: left;

    color: ${UIStyleConstants_1.UIStyleConstants.GRAY_DARK_COLOR};

    ${(props) => props.isTest &&
    `
        grid-column-start: 2;
        grid-column-end: 3;

        grid-row-start: 1;
        grid-row-end: 2;
    `}
`;
//# sourceMappingURL=IntersectionRuleHeader.js.map