import {Route, Routes} from "react-router-dom";
import {paths} from "../path";
import {useAuth} from "../hooks/useAuth";
import NotFoundPage from "./pages/notFound/NotFoundPage";
import {UserLayout} from "./layout/UserLayout";
import {HomeRedirect} from "./HomeRedirect";
import {PublicLayout} from "./layout/PublicLayout";
import LoginPage from "./pages/auth/sign-in/loginPage";
import {TelegramCode} from "./pages/auth/sign-in/telegram-code";
import {IngredientsPage} from "./pages/ingredients/IngredientsPage";
import {MenuPage} from "./pages/cocktails/MenuPage";
import {EditIngredientPage} from "./pages/ingredients/EditIngredientPage";
import {EditCocktailPage} from "./pages/cocktails/EditCocktailPage";
import {useEffect, useState} from "react";
import {BarChangePage} from "./pages/BarChangePage";
import {CalcPage} from "./pages/calc/CalcPage";

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 = [
    {
        children: (<HomeRedirect auth={true}/>),
        isPrivate: false,
        path: paths.home,
    },
    {
        path: paths.auth.signIn,
        children: (<LoginPage/>),
        isPrivate: false,
    },
    {
      path: paths.bar.calc,
      children: (<CalcPage/>),
      isPrivate: true,
    },
    {
        path: paths.dashboard.overview,
        isPrivate: true,
        children: (<MenuPage/>),
        exact: true,
    },
    {
        path: paths.bar.list,
        isPrivate: true,
        children: (<BarChangePage/>),
    },
    {
        path: paths.bar.ingredients,
        isPrivate: true,
        children: (<IngredientsPage/>)
    },
    {
        path: paths.bar.ingredientEdit,
        isPrivate: true,
        forAdmin: true,
        children: (<EditIngredientPage/>)
    },
    {
        path: paths.bar.cocktailEdit,
        isPrivate: true,
        forAdmin: true,
        children: (<EditCocktailPage/>)
    },
    {
        path: paths.notFound,
        isPrivate: false,
        children: (<NotFoundPage/>)
    },
]

const guestPages = [
    {
        path: paths.dashboard.overview,
        isPrivate: true,
        children: (<MenuPage/>),
        exact: true,
    },
    {
        children: (<HomeRedirect auth={true}/>),
        isPrivate: false,
        path: paths.home,
    },
    {
        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/>),
    },
]