import * as React from "react";
import CssBaseline from "@mui/material/CssBaseline";
import { SnackbarProvider } from 'notistack';
import { ThemeProvider } from '@mui/material/styles';
import { createRoot } from 'react-dom/client';
import { BrowserRouter, Routes, Route, Outlet, Navigate } from "react-router-dom";
import theme from "./theme";
import PublicRoute from "@kitUI/publicRoute";
import PrivateRoute from "@kitUI/privateRoute";
import Signin from "@pages/Authorization/signin";
import Signup from "@pages/Authorization/signup";
import Restore from "@pages/Authorization/restore";
import Sections from "@pages/Sections";
import Dashboard from "@pages/dashboard";
import Error404 from "@pages/Error404";
import Users from "@pages/dashboard/Content/Users";
import Entities from "@pages/dashboard/Content/Entities";
import Tariffs from "@pages/dashboard/Content/Tariffs";
import DiscountManagement from "@pages/dashboard/Content/DiscountManagement";
import PromocodeManagement from "@pages/dashboard/Content/PromocodeManagement";
import Support from "@root/pages/dashboard/Content/Support/Support";

const componentsArray = [
    ["/users", <Users />],
    ["/entities",<Entities />],
    ["/tariffs", <Tariffs />],
    ["/discounts", <DiscountManagement />],
    ["/promocode", <PromocodeManagement />],
    ["/support", <Support />],
    ["/support/:ticketId", <Support />],
]

const container = document.getElementById('root');
const root = createRoot(container!);
root.render(
    <React.StrictMode>
        <CssBaseline />
        <ThemeProvider theme={theme}>
            <SnackbarProvider>
                <BrowserRouter>
                    <Routes>
                        <Route path="/" element={<PublicRoute><Signin /></PublicRoute> } />
                        <Route path="/signin" element={ <PublicRoute><Signin /></PublicRoute> } />
                        <Route path="/signup" element={ <PublicRoute><Signup /></PublicRoute> } />
                        <Route path="/restore" element={ <PublicRoute><Restore /></PublicRoute> } />
                        <Route path="/dispatch" element={ <PublicRoute><Sections /></PublicRoute> } />
                        <Route element={<PrivateRoute><Dashboard/></PrivateRoute>}>
                            {componentsArray.map((e:any, i) => (
                                <Route key={i} path={e[0]} element={e[1]} />
                            ))}
                        </Route>

                        <Route
                            path="*"
                            element={ <Error404 /> }
                        />
                    </Routes>
                </BrowserRouter>
            </SnackbarProvider>
        </ThemeProvider>
    </React.StrictMode>
);