import React, {lazy, Suspense} from "react"
import {BrowserRouter, Route, Routes} from "react-router-dom"
import useAuthUser from "../hooks/AuthUser"
import Header from "../components/Header"
import Weather from "./Weather"

const ForgotPassword = lazy(() => import('./Auth/ForgotPassword'))
const Home = lazy(() => import('./Home'))
const Login = lazy(() => import('./Auth/Login'))
const Profile = lazy(() => import('./Auth/Profile'))
const Reset = lazy(() => import('./Auth/Reset'))
const Rainfall = lazy(() => import('./Rainfall'))
const RainfallIndex = lazy(() => import('./Rainfall/RainfallIndex'))

const Router = () => {

    const {loadingAuthUser} = useAuthUser()

    return <>
        {loadingAuthUser ? '...loading'
            : <BrowserRouter>
                <Suspense fallback={'... loading'}>
                    <Header />
                    <Routes>
                        <Route path="/" element={<Home />} />
                        <Route path="/profile" element={<Profile />} />
                        <Route path="/connexion" element={<Login />} />
                        {/*<Route path="/sinscrire" element={<Register />} />*/}
                        <Route path="/mot-de-passe-oubliee" element={<ForgotPassword />} />
                        <Route path="/changer-le-mot-de-passe/:token" element={<Reset />} />
                        <Route path="/meteo" element={<Weather />} />
                        <Route path="/pluviometrie" element={<Rainfall />} />
                        <Route path="/pluviometrie/mesures" element={<RainfallIndex />} />
                    </Routes>
                </Suspense>
            </BrowserRouter>
        }
    </>
}

export default Router