import { GridSectionsState } from './GridSectionsState';
import { observer } from 'mobx-react-lite';
import { GridSectionAndRepeater } from './GridSectionAndRepeater';
import React, { useEffect, useState } from 'react';
import { runInAction } from 'mobx';
import { Box } from '@wix/design-system';
import { GridSectionsSingleSkeletonGrid } from './GridSectionsSingleSkeletonGrid';
function _GridSectionsContent(props) {
    const { state: grid, groupBy, renderSection, layoutType } = props;
    const { toolbar } = grid;
    const { showInitialLoader, multi: { showRefreshLoader }, } = toolbar;
    const [state] = useState(() => (grid._sections ??= new GridSectionsState({
        toolbar: grid.toolbar,
        collection: grid.collection,
        groupBy,
        renderSection,
        parentState: grid,
    })));
    const { sections } = state;
    useEffect(() => {
        runInAction(() => {
            state.groupBy = groupBy;
            if (renderSection) {
                state.renderSection = renderSection;
            }
        });
    }, [groupBy, renderSection]);
    let child;
    if (!sections.length || showInitialLoader || showRefreshLoader) {
        child = (React.createElement(GridSectionsSingleSkeletonGrid, { ...props, state: state.parentState }));
    }
    else {
        child = (React.createElement(React.Fragment, null, sections.map((sectionDescriptor) => (React.createElement(GridSectionAndRepeater, { ...props, key: sectionDescriptor.sectionId, sectionDescriptor: sectionDescriptor, state: state })))));
    }
    return (React.createElement(Box, { direction: "vertical", width: "100%", paddingTop: layoutType === 'list' ? 'SP2' : undefined, paddingBottom: layoutType === 'list' ? 'SP2' : undefined }, child));
}
export const GridSectionsContent = observer(_GridSectionsContent);
//# sourceMappingURL=GridSectionsContent.js.map