import { Navigate, Route, RouterProvider, createBrowserRouter, createRoutesFromElements, useLocation, useNavigate, useRouteLoaderData } from 'react-router-dom'

import Layout from './components/Layout'

import Index from './pages/Index'
import Login from './pages/Login'
import Register from './pages/Register'
import NoMatch from './pages/NoMatch'
import Team from './pages/Team'
import Teams from './pages/Teams'
import { UserProvider } from './store/user'
import { ajax } from './utils/fetch'
import TeamNew from './pages/TeamNew'
const router = createBrowserRouter(
  createRoutesFromElements(
    <Route
      path="/"
      id="root"
      element={<Layout />}
      loader={async () => ajax("/api/user")}
    >
      <Route 
        index 
        element={<Index />}
        loader={() => ajax("/api/games")}
      />
      <Route path="login" element={<Login />} />
      <Route path="register" element={<Register />} />
      <Route
        path="teams"
        element={<Auth><Teams /></Auth>}
        loader={() => ajax("/api/teams")}
      />
      <Route
        path="teams/new"
        element={<Auth><TeamNew /></Auth>}
      />
      <Route
        path="teams/:teamId"
        element={<Auth><Team /></Auth>}
        loader={({ params }) => ajax(`/api/teams/${params.teamId}`)}
      />
      <Route path="*" element={<NoMatch />} />
    </Route>
  )
);
function App() {
  return (
    <RouterProvider router={router} />
  )
}

function Auth({ children }) {
  const baseUser = useRouteLoaderData("root")
  const {user} = UserProvider.useContainer();
  const location = useLocation();
  if (!user && !baseUser) {
    return <Navigate to="/login" state={{from: location}} replace />;
  }
  
  return children;
}

export default App