import React from "react";
import { Switch, Route, Redirect } from "react-router-dom";

import { Login } from "auth/Login";
import { Signup } from "auth/Signup";
import { useAuth, TokenContext } from "auth/useAuth";

import { Page } from "layout/Page";
import { FileList } from "file/FileList";

export function App() {
  const token = useAuth();
  const root = token?.token?.user.rootFolder;

  return (
    <Switch>
      <Route path="/login">
        <Login login={token.login} />
      </Route>
      <Route path="/signup">
        <Signup />
      </Route>
      <Route>
        {token.token !== null ? (
          <TokenContext.Provider value={token}>
            <Page>
              <Switch>
                <Route path="/folder/:id">
                  <FileList />
                </Route>
                <Route>
                  <Redirect to={`/folder/${root}`} />
                </Route>
              </Switch>
            </Page>
          </TokenContext.Provider>
        ) : (
          <Redirect to="/login" />
        )}
      </Route>
    </Switch>
  );
}