import ReactDOM from 'react-dom/client'
import {RouterContext, RouterView, ViewMap} from "mobx-state-router";
import {initApp} from "./utils/init";
import React from "react";
import 'bootstrap/dist/css/bootstrap.min.css';
import './index.css'
import {RootStoreContext} from './utils/context';
import {Home} from "./components/layout/Home";
import {GroupListPage} from "./components/group/GroupListPage";
import {Error} from "./components/layout/Error";
import {ParticipantListPage} from "./components/participant/ParticipantListPage";
import {DefenceListPage} from "./components/defence/DefenceListPage";
import {PreparationDirectionListPage} from "./components/dictionary/PreparationDirectionList";
import {DiplomaTopicListPage} from "./components/dictionary/DiplomaTopicList";

const viewMap: ViewMap = {
    home: <Home/>,
    participantList: <ParticipantListPage/>,
    groupList: <GroupListPage/>,
    defenceList: <DefenceListPage/>,
    themeList: <DiplomaTopicListPage/>,
    preparationDirectionList: <PreparationDirectionListPage/>,
    error: <Error/>,
}

const rootStore = initApp();

ReactDOM.createRoot(document.getElementById('root')!).render(
    <RootStoreContext.Provider value={rootStore}>
        <RouterContext.Provider value={rootStore.routerStore}>
            <RouterView viewMap={viewMap}/>
        </RouterContext.Provider>
    </RootStoreContext.Provider>
);