import React, { useEffect, useState } from 'react';
import { useWixPatternsContainer } from '@wix/bex-core/react';
import { observer } from 'mobx-react-lite';
import { CollectionTableWSRTable, } from '../CollectionTable/CollectionTableWSRTable';
import { NestedTableContent } from './NestedTableContent';
import { useToolbarCollectionSyncProps } from '../ToolbarCollection/useToolbarCollectionSyncProps';
import { useModeTableProps } from './useModeTableProps';
import { runInAction } from 'mobx';
import { QuerySearch } from '../QuerySearch';
import { MultiCollectionSupportProvider } from '../MultiCollectionSupportProvider';
import { TablePlaceholderStates } from '../TablePlaceholderStates/TablePlaceholderStates';
import { getVirtualTableProps } from '../Table/getVirtualTableProps';
function _NestedTableWSRTable(props) {
    const { state: wrapperState, renderError, errorState = renderError &&
        ((err, { isOnline, retry }) => renderError?.({
            err,
            isOnline,
            retry,
        })), multiLevelSorting, actionCell, actionCellWidth, actionCellProps, filters, emptyState, noResultsState, showTitleBar = !wrapperState.container.isPanelLayout, horizontalScroll = true, rowHeight, estimatedRowHeight, rowVerticalPadding = 'tiny', dragAndDrop, dragAndDropBulkSubmit, dragAndDropSubmit, dragAndDropCancel, dragAndDropReorderModeToolbar, dragAndDropCategories, search = true, tabs, ...rest } = props;
    const { toolbar, query } = wrapperState;
    const { internalExperiments } = useWixPatternsContainer();
    const isGreyHeadersEnabled = internalExperiments?.enabled('specs.cairo.tableGreyHeaders');
    useState(() => {
        dragAndDrop?.setStateObject({
            state: wrapperState,
        });
    });
    useToolbarCollectionSyncProps({
        ...props,
        state: toolbar,
        isUsingDragAndDrop: false,
        isUsingBulkActionsToolbar: false,
        isUsingHorizontalScroll: true,
        isUsingFolders: false,
        isUsingTableVirtualization: true,
    });
    const Table = CollectionTableWSRTable;
    const { state, key, BodyElementType, TrElementType, columns } = useModeTableProps({
        state: wrapperState,
        horizontalScroll,
        actionCellWidth,
        actionCellProps,
        dragAndDrop,
    });
    useEffect(() => {
        runInAction(() => {
            state.virtual.rowHeight = rowHeight;
        });
    }, [rowHeight, state]);
    useEffect(() => {
        if (estimatedRowHeight == null) {
            return;
        }
        runInAction(() => {
            state.virtual.estimatedRowHeight = estimatedRowHeight;
        });
    }, [estimatedRowHeight, state]);
    let table = (React.createElement(Table, { rowVerticalPadding: rowVerticalPadding, search: search === true ? React.createElement(QuerySearch, { state: query.search }) : search, ...rest, skin: isGreyHeadersEnabled ? 'neutral' : rest.skin, showHeaderWhenEmpty: true, sticky: true, tabs: tabs, filters: filters, horizontalScroll: horizontalScroll, emptyState: emptyState, noResultsState: noResultsState, isApplyColumnWidthStyle: true, showTitleBar: showTitleBar, ...getVirtualTableProps({ horizontalScroll }), TrElementType: TrElementType, state: state, BodyElementType: BodyElementType, columns: columns, dragAndDropReorderModeToolbar: dragAndDropReorderModeToolbar, dragAndDrop: dragAndDrop, dragAndDropCancel: dragAndDropCancel, dragAndDropSubmit: dragAndDropSubmit, dragAndDropBulkSubmit: dragAndDropBulkSubmit, dragAndDropCategories: dragAndDropCategories },
        React.createElement(MultiCollectionSupportProvider, { key: `MultiCollectionSupportProvider_${key}`, value: state.multi },
            React.createElement(TablePlaceholderStates, { key: `PlaceholderStates_${key}`, state: state, emptyState: emptyState, noResultsState: noResultsState, errorState: errorState, rowVerticalPadding: rowVerticalPadding, showTitleBar: showTitleBar }),
            React.createElement(NestedTableContent, { key: `NestedTableContent_${key}`, state: state }))));
    if (dragAndDrop) {
        const { NestedTableDragAndDropContext } = dragAndDrop;
        table = (React.createElement(NestedTableDragAndDropContext, { state: wrapperState.nested, onSubmit: dragAndDropSubmit, onBulkSubmit: dragAndDropBulkSubmit }, table));
    }
    return table;
}
export const NestedTableWSRTable = observer(_NestedTableWSRTable);
//# sourceMappingURL=NestedTableWSRTable.js.map