"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.ValueRuleTableHeader = 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 PlusGrayIcon_1 = require("../../../../CommonUI/Icon/PlusGrayIcon");
const StateManager_1 = require("@appglue/common/dist/Common/StateManager");
const ValueTableRuleColumnHeader_1 = require("./ValueTableRuleColumnHeader");
const CommonStyles_1 = require("../../../DesignUI/CommonStyles");
const XResultColumn_1 = require("../../CommonUI/XResultColumn");
const TestContext_1 = require("../../../../CommonUI/Testing/TestContext");
const ValueRuleTableHeader = (props) => {
    const { ruleDefinition, editContext } = props;
    const testContext = react_1.default.useContext(TestContext_1.TestContext);
    const onAddNewColumnHeader = () => {
        if (testContext)
            return;
        ruleDefinition.addColumn();
        StateManager_1.StateManager.propertyChanged(ruleDefinition, "columns");
    };
    const onAddNewResultColumnHeader = () => {
        if (testContext)
            return;
        ruleDefinition.addResultColumn();
        StateManager_1.StateManager.propertyChanged(ruleDefinition, "resultColumns");
    };
    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(CommonStyles_1.RuleTableIndexColumn, {}), (0, jsx_runtime_1.jsx)(ValueTableRulesLabel, { length: ruleDefinition.columns.length + 1, children: "Rules" }), (0, jsx_runtime_1.jsx)(ValueTableRulesLabel, { length: ruleDefinition.resultColumns.length + 2, children: "Result" }), (0, jsx_runtime_1.jsx)(CommonStyles_1.RuleTableIndexColumn, {}), ruleDefinition.columns.map((ruleColumn, idx) => {
                return ((0, jsx_runtime_1.jsx)(ValueTableRuleColumnHeader_1.XValueTableRuleColumnHeader, { ruleDefinition: ruleDefinition, editContext: editContext, ruleColumn: ruleColumn }, idx));
            }), (0, jsx_runtime_1.jsx)(CommonStyles_1.RuleTableHeaderActionColumn, { onClick: onAddNewColumnHeader, "data-testid": "btn-value-table-add-new-column", children: testContext ? null : (0, jsx_runtime_1.jsx)(PlusGrayIcon_1.PlusGrayIcon, {}) }), ruleDefinition.resultColumns.map((resultCol) => {
                return (0, jsx_runtime_1.jsx)(XResultColumn_1.XResultColumn, { ruleDefinition: ruleDefinition, resultColumn: resultCol }, resultCol._id);
            }), (0, jsx_runtime_1.jsx)(CommonStyles_1.RuleTableHeaderActionColumn, { onClick: ruleDefinition.canChangeOutputs ? onAddNewResultColumnHeader : undefined, "data-testid": "btn-value-table-add-new-result-column", children: ruleDefinition.canChangeOutputs && !testContext ? (0, jsx_runtime_1.jsx)(PlusGrayIcon_1.PlusGrayIcon, {}) : null }), (0, jsx_runtime_1.jsx)(CommonStyles_1.RuleTableHeaderActionColumn, {}), (0, jsx_runtime_1.jsx)(CommonStyles_1.RuleTableIndexColumn, { height: 1 }), ruleDefinition.columns.map((_, idx) => ((0, jsx_runtime_1.jsx)(CommonStyles_1.RuleTableHeaderSplit, {}, idx))), (0, jsx_runtime_1.jsx)(CommonStyles_1.RuleTableHeaderSplit, { width: 24 }), ruleDefinition.resultColumns.map((resultCol) => {
                return (0, jsx_runtime_1.jsx)(CommonStyles_1.RuleTableHeaderSplit, {}, resultCol._id);
            }), (0, jsx_runtime_1.jsx)(CommonStyles_1.RuleTableHeaderSplit, { width: 24 }), (0, jsx_runtime_1.jsx)(CommonStyles_1.RuleTableHeaderSplit, { width: 24 })] }));
};
exports.ValueRuleTableHeader = ValueRuleTableHeader;
const ValueTableRulesLabel = styled_components_1.default.div `
    grid-column: span ${(props) => props.length};
    border-bottom: 2px solid #4050a6;

    padding-top: 10px;

    color: #4050a6;

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