import { BrowserRouter, Outlet, Route, Routes } from "react-router-dom"

import { Header } from "./pages/template/Header.tsx"
import "./style/app.css"
import { lazy } from "react"
import { BASE } from "./Constants.ts"

const HomePage = lazy(() => import("./pages/HomePage.tsx"))
const LoginPage = lazy(() => import("./pages/LoginPage.tsx"))
const RegisterPage = lazy(() => import("./pages/RegisterPage.tsx"))
const NotFoundPage = lazy(() => import("./pages/404.tsx"))
const CreateTeamPage = lazy(() => import("./pages/CreateTeamPage.tsx"))
const TeamPanelPage = lazy(() => import("./pages/TeamPanel.tsx"))
const NewTacticPage = lazy(() => import("./pages/NewTacticPage.tsx"))
const Editor = lazy(() => import("./pages/Editor.tsx"))

export default function App() {
    return (
        <div id="app">
            <BrowserRouter>
                <Outlet />
                <Routes>
                    <Route path={BASE}>

                        <Route path={"login"} element={<LoginPage />} />
                        <Route path={"register"} element={<RegisterPage />} />

                        <Route path={""} element={<AppLayout />}>
                            <Route path={""} element={<HomePage />} />
                            <Route path={"home"} element={<HomePage />} />

                            <Route
                                path={"team/new"}
                                element={<CreateTeamPage />}
                            />
                            <Route
                                path={"team/:teamId"}
                                element={<TeamPanelPage />}
                            />
                            <Route
                                path={"tactic/new"}
                                element={<NewTacticPage />}
                            />
                            <Route
                                path={"tactic/:tacticId/edit"}
                                element={<Editor guestMode={false} />}
                            />
                            <Route
                                path={"tactic/edit-guest"}
                                element={<Editor guestMode={true} />}
                            />

                            <Route path={"*"} element={<NotFoundPage />} />
                        </Route>
                    </Route>

                </Routes>
            </BrowserRouter>
        </div>
    )
}

function AppLayout() {
    return (
        <>
            <Header />
            <Outlet />
        </>
    )
}
