import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
import React from "react";
import styled from "styled-components";
import { PlusGrayIcon } from "../../../../CommonUI/Icon/PlusGrayIcon";
import { StateManager } from "../../../../CommonUI/StateManagement/StateManager";
import { XValueTableRuleColumnHeader } from "./ValueTableRuleColumnHeader";
import { RuleTableIndexColumn, RuleTableHeaderActionColumn, RuleTableHeaderSplit, } from "../../../DesignUI/CommonStyles";
import { XResultColumn } from "../../CommonUI/XResultColumn";
import { TestContext } from "../../../../Tester/TestContext";
export const ValueRuleTableHeader = (props) => {
    const { ruleDefinition, editContext } = props;
    const testContext = React.useContext(TestContext);
    const onAddNewColumnHeader = () => {
        if (testContext)
            return;
        ruleDefinition.addColumn();
        StateManager.propertyChanged(ruleDefinition, "columns");
    };
    const onAddNewResultColumnHeader = () => {
        if (testContext)
            return;
        ruleDefinition.addResultColumn();
        StateManager.propertyChanged(ruleDefinition, "resultColumns");
    };
    return (_jsxs(_Fragment, { children: [_jsx(RuleTableIndexColumn, {}, void 0),
            _jsx(ValueTableRulesLabel, Object.assign({ length: ruleDefinition.columns.length + 1 }, { children: "Rules" }), void 0),
            _jsx(ValueTableRulesLabel, Object.assign({ length: ruleDefinition.resultColumns.length + 2 }, { children: "Result" }), void 0),
            _jsx(RuleTableIndexColumn, {}, void 0),
            ruleDefinition.columns.map((ruleColumn, idx) => {
                return (_jsx(XValueTableRuleColumnHeader, { ruleDefinition: ruleDefinition, editContext: editContext, ruleColumn: ruleColumn }, idx));
            }),
            _jsx(RuleTableHeaderActionColumn, Object.assign({ onClick: onAddNewColumnHeader, "data-testid": "btn-value-table-add-new-column" }, { children: testContext ? null : _jsx(PlusGrayIcon, {}, void 0) }), void 0),
            ruleDefinition.resultColumns.map((resultCol) => {
                return _jsx(XResultColumn, { ruleDefinition: ruleDefinition, resultColumn: resultCol }, resultCol._id);
            }),
            _jsx(RuleTableHeaderActionColumn, Object.assign({ onClick: ruleDefinition.canChangeOutputs ? onAddNewResultColumnHeader : undefined, "data-testid": "btn-value-table-add-new-result-column" }, { children: ruleDefinition.canChangeOutputs && !testContext ? _jsx(PlusGrayIcon, {}, void 0) : null }), void 0),
            _jsx(RuleTableHeaderActionColumn, {}, void 0),
            _jsx(RuleTableIndexColumn, { height: 1 }, void 0),
            ruleDefinition.columns.map((_, idx) => (_jsx(RuleTableHeaderSplit, {}, idx))),
            _jsx(RuleTableHeaderSplit, { width: 24 }, void 0),
            ruleDefinition.resultColumns.map((resultCol) => {
                return _jsx(RuleTableHeaderSplit, {}, resultCol._id);
            }),
            _jsx(RuleTableHeaderSplit, { width: 24 }, void 0),
            _jsx(RuleTableHeaderSplit, { width: 24 }, void 0)] }, void 0));
};
const ValueTableRulesLabel = styled.div `
    grid-column: span ${(props) => props.length};
    border-bottom: 2px solid #4050a6;

    padding-top: 10px;

    color: #4050a6;

    font-family: Inter;
    font-size: 8px;
    font-style: normal;
    font-weight: 500;
    line-height: 11px;
    letter-spacing: 0.10000000149011612px;
    text-align: left;
`;
//# sourceMappingURL=ValueTableRuleHeader.js.map