import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
import React, { useState } from "react";
import { ObserveState } from "../../../../CommonUI/StateManagement/ObserveState";
import { StateManager } from "../../../../CommonUI/StateManagement/StateManager";
import { RuleTableHeader } from "./RuleTableHeader";
import { PlusGrayIcon } from "../../../../CommonUI/Icon/PlusGrayIcon";
import { Notification } from "../../../../CommonUI/BuildUI/Notification";
import { RuleDesignerRender, RuleToolbarRender, RuleEditorRender, RuleTableEmptyAddColumn, RuleTableEmptyIndexColumn, RuleTableEmptyColumn, RuleLabelColumn, RuleEditorInTester, } from "../../../DesignUI/CommonStyles";
import { SettingButton } from "../../../DesignUI/SettingButton";
import { XResultCell } from "../../CommonUI/XResultCell";
import { ObserveMultiState } from "../../../../CommonUI/StateManagement/ObserveMultiState";
import { ValidationInformation } from "../../../DesignUI/ValidationInformation";
import { DockedSidebar } from "../../../../CommonUI/BuildUI/DockSidebar";
import { EditLayerConfigArea, EditLayerStyledAccordion, EditLayerStyledAccordionSummary, EditLayerStyledTypography, EditLayerStyledAccordionDetails, } from "../../../../CommonUI/CommonStyles";
import { StyledFormControlLabel } from "../../../../CommonUI/Components/FormControlLabel";
import { StyledSwitch } from "../../../../CommonUI/Components/Switch";
import { XRuleTableRow } from "./RuleTableRow";
import { TestContext } from "../../../../Tester/TestContext";
import { ITableRowTestValue, TableRowTestContext } from "../../Common/TableRowTestContext";
import { TestResult } from "../../../../CommonUI/Testing/TestResult";
export const RuleTableDesigner = (props) => {
    const { ruleDefinition, editContext } = props;
    const [openSettingsLayer, setOpenSettingsLayer] = useState(false);
    const testContext = React.useContext(TestContext);
    const onAddNewRow = () => {
        if (testContext)
            return;
        ruleDefinition.addRow();
        StateManager.propertyChanged(ruleDefinition, "rows");
    };
    const isDefaultTestResult = !!testContext &&
        !testContext.isError &&
        !((testContext === null || testContext === void 0 ? void 0 : testContext.items) || []).find((rowResult) => rowResult.result === "true");
    if (testContext) {
        return (_jsxs(RuleEditorInTester, { children: [_jsxs(RuleEditorRender, Object.assign({ columnCount: ruleDefinition.ruleColumns.length + ruleDefinition.resultColumns.length + 1, className: "RuleEditorRender", rowsGap: 6 }, { children: [_jsx(RuleTableHeader, Object.assign({}, props), void 0),
                        _jsx(_Fragment, { children: ruleDefinition.rows.map((row, idx) => {
                                return (_jsx(XRuleTableRow, { editContext: editContext, row: row, ruleDefinition: ruleDefinition, rowIndex: idx }, row._id));
                            }) }, void 0),
                        _jsx(RuleTableEmptyIndexColumn, { "data-testid": "btn-rule-table-add-new-row" }, void 0),
                        ruleDefinition.ruleColumns.map((_, idx) => {
                            return _jsx(RuleTableEmptyColumn, {}, idx);
                        }),
                        _jsx(RuleTableEmptyAddColumn, {}, void 0),
                        ruleDefinition.resultColumns.map((col) => {
                            return _jsx(RuleTableEmptyColumn, {}, col._id);
                        }),
                        _jsx(RuleTableEmptyAddColumn, {}, void 0),
                        _jsx(RuleTableEmptyAddColumn, {}, void 0),
                        ruleDefinition.allowDefaultResults && (_jsxs(TableRowTestContext.Provider, Object.assign({ value: isDefaultTestResult ? ITableRowTestValue.PASSED : undefined }, { children: [_jsx(RuleLabelColumn, Object.assign({ colSpan: ruleDefinition.ruleColumns.length + 1, colStart: 1, y: ruleDefinition.rows.length + 3 }, { children: "Default Result Values" }), void 0),
                                ruleDefinition.resultColumns.map((rescol, index2) => {
                                    return (_jsx(ObserveState, { listenTo: rescol, control: () => (_jsx(XResultCell, { ruleDefinition: ruleDefinition, resultColumn: rescol, editContext: editContext, resultCell: ruleDefinition.defaultResult[rescol._id], rowIndex: ruleDefinition.rows.length + 3, cellIndex: ruleDefinition.ruleColumns.length + 2 + index2 }, void 0)) }, rescol._id));
                                })] }), void 0))] }), void 0),
                _jsx(TestResult, { executableId: ruleDefinition._id }, void 0)] }, void 0));
    }
    return (_jsxs(RuleDesignerRender, { children: [_jsx(RuleToolbarRender, { children: _jsx(SettingButton, { onClick: () => setOpenSettingsLayer(true) }, void 0) }, void 0),
            _jsx(DockedSidebar, { sidebar: () => {
                    return (_jsx(EditLayerConfigArea, { children: _jsxs(EditLayerStyledAccordion, Object.assign({ expanded: true, onChange: () => { }, defaultExpanded: true }, { children: [_jsx(EditLayerStyledAccordionSummary, { children: _jsx(EditLayerStyledTypography, Object.assign({ variant: "subtitle1", classes: { root: "config-form-header" } }, { children: "Settings" }), void 0) }, void 0),
                                _jsx(EditLayerStyledAccordionDetails, Object.assign({ classes: { root: "config-form-content" } }, { children: _jsx(ObserveState, { listenTo: ruleDefinition, control: () => (_jsx(StyledFormControlLabel, { control: _jsx(StyledSwitch, { color: "primary", checked: ruleDefinition.allowDefaultResults, onChange: (event) => {
                                                    ruleDefinition.allowDefaultResults = event.target.checked;
                                                    StateManager.propertyChanged(ruleDefinition, "allowDefaultResults");
                                                } }, void 0), label: "Allow Default Results" }, void 0)) }, void 0) }), void 0)] }), void 0) }, void 0));
                }, content: () => (_jsx(ObserveState, { listenTo: ruleDefinition, properties: ["ruleColumns", "resultColumns"], control: () => {
                        return (_jsxs(RuleEditorRender, Object.assign({ columnCount: ruleDefinition.ruleColumns.length + ruleDefinition.resultColumns.length + 1 }, { children: [_jsx(RuleTableHeader, Object.assign({}, props), void 0),
                                _jsx(ObserveState, { listenTo: ruleDefinition, properties: ["rows"], control: () => {
                                        return (_jsx(_Fragment, { children: ruleDefinition.rows.map((row, idx) => {
                                                return (_jsx(XRuleTableRow, { editContext: editContext, row: row, ruleDefinition: ruleDefinition, rowIndex: idx }, row._id));
                                            }) }, void 0));
                                    } }, void 0),
                                _jsx(RuleTableEmptyIndexColumn, Object.assign({ onClick: onAddNewRow, "data-testid": "btn-rule-table-add-new-row" }, { children: !testContext && _jsx(PlusGrayIcon, {}, void 0) }), void 0),
                                ruleDefinition.ruleColumns.map((_, idx) => {
                                    return _jsx(RuleTableEmptyColumn, {}, idx);
                                }),
                                _jsx(RuleTableEmptyAddColumn, {}, void 0),
                                ruleDefinition.resultColumns.map((col) => {
                                    return _jsx(RuleTableEmptyColumn, {}, col._id);
                                }),
                                _jsx(RuleTableEmptyAddColumn, {}, void 0),
                                _jsx(RuleTableEmptyAddColumn, {}, void 0),
                                _jsx(ObserveState, { listenTo: ruleDefinition, properties: ["allowDefaultResults"], control: () => {
                                        if (!ruleDefinition.allowDefaultResults)
                                            return null;
                                        return (_jsxs(_Fragment, { children: [_jsx(RuleLabelColumn, Object.assign({ colSpan: ruleDefinition.ruleColumns.length + 1, colStart: 1 }, { children: "Default Result Values" }), void 0),
                                                ruleDefinition.resultColumns.map((rescol) => {
                                                    return (_jsx(ObserveState, { listenTo: rescol, control: () => (_jsx(XResultCell, { ruleDefinition: ruleDefinition, resultColumn: rescol, editContext: editContext, resultCell: ruleDefinition.defaultResult[rescol._id] }, void 0)) }, rescol._id));
                                                })] }, void 0));
                                    } }, void 0)] }), void 0));
                    } }, void 0)), sidebarWidth: 350, open: openSettingsLayer, onClose: () => setOpenSettingsLayer(false) }, void 0),
            _jsx(Notification, { editContext: editContext }, void 0),
            _jsx(ObserveMultiState, { listenTo: [
                    ...props.ruleDefinition.ruleColumns,
                    ...props.ruleDefinition.resultColumns,
                    props.ruleDefinition,
                ], control: () => _jsx(ValidationInformation, { provider: ruleDefinition }, void 0) }, void 0)] }, void 0));
};
//# sourceMappingURL=RuleTableDesigner.js.map