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/custom/layout/Home";
import {UserProfilePage} from "./components/user/UserProfilePage";
import {UserListPage} from "./components/user/UserListPage";
import {GroupListPage} from "./components/group/GroupListPage";
import {Error} from "./components/custom/layout/Error";

const viewMap: ViewMap = {
    home: <Home/>,
    profile: <UserProfilePage/>,
    userList: <UserListPage/>,
    groupList: <GroupListPage/>,
    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>
);