import { Route, Routes } from 'react-router';

import { Box } from '@mui/material';

import { GroupsConfigContext, type GroupsConfig } from './GroupsConfigContext';
import { GroupDetailPage } from './GroupDetail/GroupDetailPage';
import { GroupsListPage } from './GroupsList/GroupsListPage';

interface GroupsAppProps {
  config: GroupsConfig;
}

export const GroupsApp = ({ config }: GroupsAppProps) => (
  <GroupsConfigContext.Provider value={config}>
    <Box sx={{ mt: '20px' }}>
      <Routes>
        <Route path="/" element={<GroupsListPage type="personal" />} />
        <Route path="shared" element={<GroupsListPage type="shared" />} />
        <Route path="personal/:id" element={<GroupDetailPage type="personal" tab="overview" />} />
        <Route path="personal/:id/data" element={<GroupDetailPage type="personal" tab="data" />} />
        <Route path="shared/:id" element={<GroupDetailPage type="shared" tab="overview" />} />
        <Route path="shared/:id/data" element={<GroupDetailPage type="shared" tab="data" />} />
        <Route path="shared/:id/modules" element={<GroupDetailPage type="shared" tab="modules" />} />
        <Route path="shared/:id/modules/:moduleName" element={<GroupDetailPage type="shared" tab="modules" />} />
      </Routes>
    </Box>
  </GroupsConfigContext.Provider>
);
