import React, { useEffect } from 'react';
import { Box, Loader } from '@wix/design-system';
import { observer } from 'mobx-react-lite';
import { CollectionTable } from '../CollectionTable';
import { useTableSyncProps } from './useTableSyncProps';
import { TableProvider } from '../../providers';
import { getToolbarCollectionFeaturesInitializers } from '../../state/getToolbarCollectionFeaturesInitializers';
import { useTableBaseRow } from './useTableBaseRow';
function _TableBase(props) {
    const { state, sections, useNewInfiniteScrollLoader, multiLevelSorting } = props;
    const internalScroll = state.toolbar.container.isPanelLayout
        ? true
        : props.internalScroll;
    const { table } = state;
    const { collection } = table;
    const { fetchedLastPage, query: { limit }, } = collection;
    const { scrollElement } = useTableSyncProps(props);
    const TableBaseRow = useTableBaseRow(state);
    useEffect(() => {
        return state.init({
            featuresInitializers: [
                ...getToolbarCollectionFeaturesInitializers(props),
            ],
            hasMultiLevelSorting: multiLevelSorting !== undefined,
        });
    }, []);
    const infiniteScrollProps = useNewInfiniteScrollLoader || internalScroll
        ? {}
        : {
            infiniteScroll: true,
            loadMore: collection.fetchNextPageIfNeeded,
            hasMore: !fetchedLastPage,
            itemsPerPage: limit,
            loader: (React.createElement(Box, { backgroundColor: "D80", align: "center", padding: "large" },
                React.createElement(Loader, { dataHook: "infinite-scroll-loader" }))),
        };
    const commonTableProps = {
        ...props,
        ...infiniteScrollProps,
        scrollElement,
        useNewInfiniteScrollLoader,
        initialLoad: false,
        state,
    };
    return (React.createElement(TableProvider, { value: state }, sections ? (React.createElement(sections.TableSections, { ...commonTableProps, table: state, renderSection: sections.renderSection })) : (React.createElement(CollectionTable, { ...commonTableProps, TrElementType: TableBaseRow }))));
}
export const TableBase = observer(_TableBase);
//# sourceMappingURL=TableBase.js.map