import React, { Suspense, useEffect, useMemo } from 'react';
import { observer } from 'mobx-react-lite';
import { Table } from '../Table';
import { Grid } from '../Grid';
import { InitialLoader } from '../InitialLoader';
import { LayoutSwitchButton } from '../LayoutSwitchButton';
const LazyEditableTable = React.lazy(() => import('../EditableTable').then((m) => ({
    default: m.EditableTable,
})));
function _LayoutSwitch({ state, tableProps, gridProps, spreadsheetProps, }) {
    const { viewTypeState, initTask, toolbar } = state;
    const isLoading = initTask.status.isIdle || initTask.status.isLoading;
    // Recompute only when a prop flips between defined and undefined.
    const availableOptions = useMemo(() => viewTypeState.options.filter((option) => {
        if (option === 'table') {
            return !!tableProps;
        }
        if (option === 'grid') {
            return !!gridProps;
        }
        if (option === 'spreadsheet') {
            return !!spreadsheetProps;
        }
        return false;
    }), 
    // eslint-disable-next-line react-hooks/exhaustive-deps
    [!!tableProps, !!gridProps, !!spreadsheetProps]);
    useEffect(() => state.init(), []);
    // If the stored viewType is not among the available options (e.g. 'grid' was
    // persisted but gridProps is not provided), persist the correction so the next
    // load starts from a valid value. changeViewType also updates dataCapsule.
    useEffect(() => {
        if (availableOptions.length > 0 &&
            !availableOptions.includes(viewTypeState.viewType)) {
            viewTypeState.changeViewType(availableOptions[0]);
        }
    }, [availableOptions, viewTypeState.viewType]);
    if (!availableOptions.length) {
        console.error('[LayoutSwitch] At least one of tableProps, gridProps, or spreadsheetProps must be provided.');
        return null;
    }
    const layoutSwitchButton = (React.createElement(LayoutSwitchButton, { state: viewTypeState, options: availableOptions }));
    if (isLoading) {
        return React.createElement(InitialLoader, { dataHook: "initial-loader", state: toolbar });
    }
    // If viewType is not yet available (loaded from storage but xProp absent),
    // fall back locally without waiting for the correction effect to fire.
    const activeView = availableOptions.includes(viewTypeState.viewType)
        ? viewTypeState.viewType
        : availableOptions[0];
    if (activeView === 'table') {
        return (React.createElement("div", { "data-hook": "layout-view-table", style: { display: 'contents' } },
            React.createElement(Table, { ...tableProps, tableGridSwitchButton: layoutSwitchButton })));
    }
    if (activeView === 'grid') {
        return (React.createElement("div", { "data-hook": "layout-view-grid", style: { display: 'contents' } },
            React.createElement(Grid, { ...gridProps, tableGridSwitchButton: layoutSwitchButton })));
    }
    if (activeView === 'spreadsheet') {
        return (React.createElement("div", { "data-hook": "layout-view-spreadsheet", style: { display: 'contents' } },
            React.createElement(Suspense, { fallback: React.createElement(InitialLoader, { dataHook: "initial-loader", state: toolbar }) },
                React.createElement(LazyEditableTable, { ...spreadsheetProps, tableGridSwitchButton: layoutSwitchButton }))));
    }
    return null;
}
export const LayoutSwitch = observer(_LayoutSwitch);
//# sourceMappingURL=LayoutSwitch.js.map