import React, { useEffect, useState } from "react";
import {
  Routes,
  Route,
} from "react-router-dom";

import Container from '@mui/material/Container';
import Paper from '@mui/material/Paper';

import './App.css';
import './fonts/index.css';

import { GoodTimesBar } from "./GoodTimesBar.js";
import { GlobalContext } from "./GlobalContext.js";

import SignIn from "./SignIn.js";
import SignUp from "./SignUp.js";
import Group from "./Group.js";
import VerifyEmail from "./VerifyEmail.js";
import Dashboard from "./Dashboard.js";

import { base } from "./Common.js";

const App = () => {
  const [ user, setUser ] = useState(null);
  const [ csrfToken, setCsrfToken ] = useState(undefined);

  useEffect(() => {
    window.fetch(`${base}/api/v1/users/csrf`, {
      method: 'GET',
      cache: 'no-cache',
      credentials: 'same-origin',
      headers: {
        'Content-Type': 'application/json'
      },
    }).then((res) => {
      return res.json();
    }).then((data) => {
      setCsrfToken(data.csrfToken);
    });
  }, []);

  return (
    <div className="App">
      <GlobalContext.Provider value={{user, setUser, csrfToken }}>
        <GoodTimesBar />
        <Container className="Content">
          <Routes>
            <Route path="/signin" element={<SignIn />}/>
            <Route path="/signup" element={<SignUp />}/>
            <Route path="/user/verify-email/:token" element={<VerifyEmail />}/>
            <Route path="/password" element={
              <Paper>Not implemented... yet.</Paper>
            }/>
            <Route path="/:group" element={<Group />}/>
            { user && user.mailVerified &&
              <Route path="/" element={<Dashboard />}/>
            }
            { user && !user.mailVerified && 
              <Route path="/" element={
              <Paper style={{padding: "0.5rem"}}>You need to verify your email via the link sent to {user.email}.</Paper>}/>
            }
            { !user && 
              <Route path="/" element={<SignIn />} />
            }
          </Routes>
        </Container>
      </GlobalContext.Provider>
    </div>
  );
};

export default App;