import React, { useMemo, useState } from 'react';
import { runInAction } from 'mobx';
import { observer } from 'mobx-react-lite';
import { CollectionTable } from '../CollectionTable';
import { useTableSectionRow } from './useTableSectionRow';
import { TableSectionsState } from './TableSectionsState';
const _TableSections = ({ groupBy, renderSection, table, columns, rowDetails, collapsible, events, ...collectionTableProps }) => {
    const [state] = useState(() => new TableSectionsState(table, groupBy, renderSection, collapsible));
    runInAction(() => {
        state.renderSection = renderSection;
    });
    state.onToggleCallback = events?.onToggle;
    const columnsWithSections = useMemo(() => columns.map((column) => ({
        ...column,
        render: (item, rowNum) => {
            const keyedItem = state.sectionsKeyedItems[rowNum];
            if (keyedItem && state.isSectionRow(keyedItem)) {
                return null;
            }
            return column.render(item, rowNum);
        },
    })), [columns]);
    const wrappedRowDetails = useMemo(() => {
        if (!rowDetails) {
            return undefined;
        }
        return (rowData, rowNum) => {
            if (state.isSectionRow(rowData)) {
                return null;
            }
            return rowDetails(rowData, rowNum);
        };
    }, [rowDetails, state]);
    const TableSectionsTrElement = useTableSectionRow(state);
    return (React.createElement(CollectionTable, { ...collectionTableProps, rowDetails: wrappedRowDetails, state: state.table, columns: columnsWithSections, keyedItems: state.sectionsKeyedItems, TrElementType: TableSectionsTrElement, isRowDisabled: (keyedItem) => {
            return state.isSectionRow(keyedItem);
        }, isUsingExpandCollapse: collapsible }));
};
export const TableSections = observer(_TableSections);
//# sourceMappingURL=TableSections.js.map