import {Route, Routes} from "react-router-dom";
import {paths} from "../../path";
import {useAuth} from "../../hooks/useAuth";
import NotFoundPage from "../../app/pages/notFound/NotFoundPage";
import {UserLayout} from "../../app/layout/UserLayout";
import {PublicLayout} from "../../app/layout/PublicLayout";
import LoginPage from "../../app/pages/auth/sign-in/loginPage";
import {TelegramCode} from "../../app/pages/auth/sign-in/telegram-code";
import {MenuPage} from "../../app/pages/home/MenuPage";
import {useEffect, useState} from "react";
import ChampionshipsPage from "../../app/pages/championship/ChampionshipsPage";
import CalendarPage from "../../app/pages/calendar/CalendarPage";
import StagesPage from "../../app/pages/stages/StagesPage";
import ChampionshipPage from "../../app/pages/championship/ChampionshipPage";
import StagePage from "../../app/pages/stages/StagePage";

export function NavigationRoutes() {
    const {auth} = useAuth();
    const [loadedRoutes, setLoadedRoutes] = useState(undefined);
    useEffect(() => {
        setLoadedRoutes(auth ? authPages : guestPages)
    }, [auth]);
    if (!loadedRoutes) {
        return null
    }
    return (
        <Routes>
            {loadedRoutes.map((page) => {
                return (
                    <Route
                        key={page.path + page.isPrivate + page.exact}
                        path={page.path}
                        exact={page.exact}
                        element={<ElementProvider isPrivate={page.isPrivate}>
                            {page.children}
                        </ElementProvider>}/>
                )
            })}
        </Routes>
    )
}

function ElementProvider({isPrivate, children}) {
    if (isPrivate) {
        return (<UserLayout>{children}</UserLayout>);
    } else {
        return (<PublicLayout>{children}</PublicLayout>);
    }
}

const authPages = [
    {
        path: paths.home,
        isPrivate: true,
        children: (<MenuPage/>),
        exact: true,
    },
    {
        path: paths.auth.signIn,
        children: (<LoginPage/>),
        isPrivate: false,
    },
    {
        path: paths.chp.championships,
        isPrivate: true,
        children: (<ChampionshipsPage/>),
    },
    {
        path: paths.chp.championship,
        isPrivate: true,
        children: (<ChampionshipPage/>),
    },
    {
        path: paths.calendar,
        isPrivate: true,
        children: (<CalendarPage/>)
    },
    {
        path: paths.stg.stages,
        isPrivate: true,
        children: (<StagesPage/>)
    },
    {
        path: paths.stg.stage,
        isPrivate: true,
        children: (<StagePage/>)
    },
    {
        path: paths.notFound,
        isPrivate: false,
        children: (<NotFoundPage/>)
    },
]

const guestPages = [
    {
        path: paths.home,
        isPrivate: true,
        children: (<MenuPage/>),
        exact: true,
    },
    {
        path: paths.auth.tg,
        isPrivate: false,
        children: (<TelegramCode/>),
        exact: false
    },
    {
        path: paths.auth.signIn,
        isPrivate:
            false,
        children: (<LoginPage/>),
    },
    {
        path: paths.notFound,
        isPrivate: false,
        children: (<NotFoundPage/>),
    },
]