import React, { useEffect } from 'react';
import { Grid } from '../Grid';
import { Table } from '..';
import { observer } from 'mobx-react-lite';
import { TableGridSwitchButton } from '../TableGridSwitchButton';
import { InitialLoader } from '../InitialLoader';
export function _TableGridSwitch(props) {
    const { state, dragAndDrop, sections, ...restProps } = props;
    const { gridState, tableState, toolbar } = state;
    const tableGridSwitchButton = (React.createElement(TableGridSwitchButton, { state: state.viewTypeState }));
    useEffect(() => state.init(), []);
    const { initTask: { status }, } = state;
    const isLoading = status.isIdle || status.isLoading;
    const gridSections = sections
        ? {
            GridSections: sections.GridSections,
            renderSection: sections.renderSection,
        }
        : undefined;
    const tableSections = sections
        ? {
            TableSections: sections.TableSections,
            renderSection: sections.renderSection,
        }
        : undefined;
    return (React.createElement(React.Fragment, null, isLoading ? (React.createElement(InitialLoader, { dataHook: "initial-loader", state: toolbar })) : state.viewType === 'grid' ? (React.createElement(Grid, { ...restProps, tableGridSwitchButton: tableGridSwitchButton, state: gridState, dragAndDrop: dragAndDrop?.grid, sections: gridSections })) : (React.createElement(Table, { ...restProps, sticky: true, tableGridSwitchButton: tableGridSwitchButton, state: tableState, dragAndDrop: dragAndDrop?.table, sections: tableSections }))));
}
export const TableGridSwitch = observer(_TableGridSwitch);
//# sourceMappingURL=TableGridSwitch.js.map