import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
import React from "react";
import styled from "styled-components";
import { IntersectionRuleColumn } from "./IntersectionRuleColumn";
import { RuleTableIndexColumn, RuleTableHeaderActionColumn, RuleTableHeaderSplit } from "../../DesignUI/CommonStyles";
import { PlusGrayIcon } from "../../../CommonUI/Icon/PlusGrayIcon";
import { StateManager } from "../../../CommonUI/StateManagement/StateManager";
import { ObserveState } from "../../../CommonUI/StateManagement/ObserveState";
import { TestContext } from "../../../Tester/TestContext";
export const IntersectionRuleHeader = (props) => {
    const { expressions, ruleDefinition } = props;
    const testContext = React.useContext(TestContext);
    const onAddNewXAxisExpression = () => {
        ruleDefinition.addXAxisExpression();
        StateManager.propertyChanged(ruleDefinition, "xaxisExpressions");
    };
    if (testContext) {
        return (_jsxs(_Fragment, { children: [_jsx(RuleTableIndexColumn, { x: 0, y: 0 }, void 0),
                _jsx(IntersectionRuleTitle, Object.assign({ isTest: true }, { children: "Intersection Table" }), void 0),
                _jsx(RuleTableHeaderSplit, { height: 44, width: 1, x: 2, y: 0 }, void 0),
                expressions.map((exp, index) => (_jsx(IntersectionRuleColumn, { expression: exp, ruleDefinition: ruleDefinition, direction: "x", index: index }, exp._id))),
                _jsx(RuleTableHeaderActionColumn, { "data-testid": "btn-intersectionrule-column-add", disabled: !ruleDefinition.canChangeOutputs }, void 0),
                _jsx(RuleTableIndexColumn, { height: 1, x: 0, y: 1 }, void 0),
                _jsx(RuleTableHeaderSplit, { width: 24, x: 1, y: 1 }, void 0),
                _jsx("div", {}, void 0),
                expressions.map((_, idx) => (_jsx(RuleTableHeaderSplit, { y: 1, x: idx + 3 }, idx))),
                _jsx(RuleTableHeaderSplit, { width: 24 }, void 0)] }, void 0));
    }
    return (_jsxs(_Fragment, { children: [_jsx(RuleTableIndexColumn, {}, void 0),
            _jsx(IntersectionRuleTitle, { children: "Intersection Table" }, void 0),
            _jsx(RuleTableHeaderSplit, { height: 44, width: 1 }, void 0),
            expressions.map((exp, index) => (_jsx(IntersectionRuleColumn, { expression: exp, ruleDefinition: ruleDefinition, direction: "x", index: index }, exp._id))),
            _jsx(ObserveState, { listenTo: ruleDefinition, properties: ["canChangeOutputs"], control: () => (_jsx(RuleTableHeaderActionColumn, Object.assign({ onClick: onAddNewXAxisExpression, "data-testid": "btn-intersectionrule-column-add", disabled: !ruleDefinition.canChangeOutputs }, { children: _jsx(PlusGrayIcon, {}, void 0) }), void 0)) }, void 0),
            _jsx(RuleTableIndexColumn, { height: 1 }, void 0),
            _jsx(RuleTableHeaderSplit, { width: 24 }, void 0),
            _jsx("div", {}, void 0),
            expressions.map((_, idx) => (_jsx(RuleTableHeaderSplit, {}, idx))),
            _jsx(RuleTableHeaderSplit, { width: 24 }, void 0)] }, void 0));
};
export const IntersectionRuleTitle = styled.div `
    display: flex;
    align-items: center;
    justify-content: center;

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

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

    color: rgba(64, 80, 166, 0.3);

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

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