import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import { BrowserRouter, Route, Routes } from 'react-router-dom';
import lightTheme from "./utils/themes/light";
import { ThemeProvider } from '@mui/material';
import HorizontalLinearStepper from './ui_kit/Stepper';

import StartPage from "./pages/startPage/StartPage";
import Main from "./pages/main"
import FirstQuiz from "./pages/createQuize/FirstQuiz";
import QuestionsPage from "./pages/Questions/QuestionsPage";
import ContactFormPage from "./pages/ContactFormPage/ContactFormPage";
import InstallQuiz from "./pages/InstallQuiz/InstallQuiz";
import {Result} from "./pages/Result/Result";
import { Setting } from "./pages/Result/Setting";
import MyQuizzes from "./pages/createQuize/MyQuizzes";
import MyQuizzesFull from "./pages/createQuize/MyQuizzesFull";

const root = ReactDOM.createRoot(
    document.getElementById('root') as HTMLElement
);

const routeslink: {path: string; page: JSX.Element; header: boolean; sidebar: boolean} [] = [
    {path: "/list", page: <FirstQuiz/>, header: false, sidebar: false},
    {path: "/list-empty", page: <FirstQuiz/>, header: false, sidebar: false},
    {path: "/list-full", page: <MyQuizzesFull/>, header: false, sidebar: false},
    {path: "/list-short", page: <MyQuizzes/>, header: false, sidebar: false},
    {path: "/questions", page: <QuestionsPage/>, header: true, sidebar: true},
    {path: "/contacts", page: <ContactFormPage/>, header: true, sidebar: true},
    {path: "/result", page: <Result/>, header: true, sidebar: true},
    {path: "/settings", page: <Setting />, header: true, sidebar: true},
    {path: "/install", page: <InstallQuiz/>, header: true, sidebar: true},
]

root.render(
    <React.StrictMode>
        <ThemeProvider theme={lightTheme}>
    <BrowserRouter>
        <Routes>
            {routeslink.map((e,i) =>(
                <Route  key={i} path={e.path} element={<Main page={e.page} header={e.header} sidebar={e.sidebar}/>} />
            ))}
            <Route path="/create-quize/:quizId" element={<StartPage/>} />
        </Routes>
    </BrowserRouter>
    </ThemeProvider>
  </React.StrictMode>
);



// <Route path="/quizes" element={<Quizes/>}/>
// <Route path="/projects" element={<Projects/>}  />
// <Route path="/gallery" element={<Gallery/>} />
// <Route path="/create/quiz" element={<><NavbarCreateQuiz /></>} />
// <Route path="/create/start" element={<><NavbarCreateQuiz /></>} />
// <Route path="/create/settings" element={<><NavbarCreateQuiz /><CreateQuiz /></>} />
// <Route path="/create/stepper" element={<><NavbarCreateQuiz /><HorizontalLinearStepper/></>} />