import * as React from "react";
import { createRoot } from "react-dom/client";
import { BrowserRouter, Routes, Route } from "react-router-dom";

import CssBaseline from "@mui/material/CssBaseline";
import { ThemeProvider } from "@mui/material/styles";

import { SnackbarProvider } from "notistack";

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 "@root/pages/dashboard/Content/DiscountManagement/DiscountManagement";
import PromocodeManagement from "@pages/dashboard/Content/PromocodeManagement";
import { SettingRoles } from "@pages/Setting/SettingRoles";
import Support from "@pages/dashboard/Content/Support/Support";

import theme from "./theme";
import "./index.css";

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

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>
              }
            >
              <Route
                path="/settingRoles"
                element={
                  <PrivateRoute>
                    <SettingRoles />
                  </PrivateRoute>
                }
              />
              {componentsArray.map((element) => (
                <Route key={element[0]} path={element[0]} element={element[1]} />
              ))}
            </Route>

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