import React, { useEffect, useLayoutEffect } from 'react';
import { observer } from 'mobx-react-lite';
import { InitialSkeletonLoader } from '../InitialLoader/InitialSkeletonLoader';
import { PageGridInfiniteScrollLoader } from '../PageGridInfiniteScrollLoader';
import { Box } from '@wix/design-system';
import { useGridBaseSyncProps } from './useGridBaseSyncProps';
import { useRenderItem } from './useRenderItem';
import { VirtualGridRepeater } from '../VirtualGridRepeater/VirtualGridRepeater';
function _GridContent(props) {
    const { state, withInfiniteScrollLoader, dragAndDrop, dragAndDropSubmit, paddingTop, paddingBottom, } = props;
    const { toolbar: { contentPaddingPx, showInitialLoader, multi: { showRefreshLoader }, }, } = state;
    useGridBaseSyncProps(props);
    useEffect(() => state.init(), []);
    const renderItem = useRenderItem(props);
    let child = React.createElement(VirtualGridRepeater, { renderItem: renderItem, gridState: state });
    if (dragAndDrop) {
        const { DraggableCardOverlay, SortableContext } = dragAndDrop;
        child = (React.createElement(SortableContext, { state: state, onSubmit: dragAndDropSubmit },
            child,
            React.createElement(DraggableCardOverlay, { state: state, renderItem: renderItem })));
    }
    if (showRefreshLoader || showInitialLoader) {
        child = (React.createElement(InitialSkeletonLoader, { dataHook: showInitialLoader ? 'grid-initial-loader' : 'grid-refresh-loader', state: state }));
    }
    else {
        child = (React.createElement(React.Fragment, null,
            child,
            withInfiniteScrollLoader && (React.createElement(PageGridInfiniteScrollLoader, { dataHook: "infinite-scroll-loader", state: state, scrollMoreAlways: true }))));
    }
    useLayoutEffect(() => {
        state._containerRectState._syncThrottled();
    }, []);
    useEffect(() => state._containerRectState.init(), []);
    return (React.createElement(Box, { direction: "vertical", paddingTop: paddingTop, paddingBottom: paddingBottom, paddingRight: contentPaddingPx, paddingLeft: contentPaddingPx },
        React.createElement("div", { ref: (el) => {
                state._containerRectState.element = el;
            } }, child)));
}
export const GridContent = observer(_GridContent);
//# sourceMappingURL=GridContent.js.map