import { useState, useEffect } from 'react';
import AppNavBar from './components/AppNavBar';
import { Container } from 'react-bootstrap';
import { BrowserRouter as Router } from 'react-router-dom';
import { Route, Routes } from 'react-router-dom';
import './App.css';
import { UserProvider } from './UserContext';

// Pages
import Home from './pages/Home';
import Courses from './pages/Courses';
import Register from './pages/Register';
import Login from './pages/Login';
import Logout from './pages/Logout';
import Profile from './pages/Profile';
import CourseView from './pages/CourseView';
import AddCourse from './pages/AddCourse';
import NotFound from './pages/Error';

function App() {

  // let user = { token: localStorage.getItem('token') }
  const [user, setUser] = useState({
    id: null,
    isAdmin: null
  })

  const unsetUser = () => {
    localStorage.clear()
  }

  useEffect(() => {
    
    // console.log(localStorage);

    fetch(`${process.env.REACT_APP_API_URL}/users/details`, {
      headers: {
        Authorization: `Bearer ${ localStorage.getItem('token') }`
      }
    })
    .then(res => res.json())
    .then(data => {

      // console.log(data);

      if(typeof data._id !== "undefined"){
        
        setUser({
          id: data._id,
          isAdmin: data.isAdmin
        });

      } else {

        setUser({
          id: null,
          isAdmin: null
        });

      }

    })

  }, [])

  console.log(user);

  return (
    // JSX - JavaScript XML code

    // <></> - Fragments 
    <UserProvider value={{ user, setUser, unsetUser }}>
      <Router>
        <AppNavBar />
        <Container>
          <Routes>
            <Route path="/" element={<Home />} />
            <Route path="/courses" element={<Courses />} />
            {/*MINI ACTIVITY - continue completing the routes*/}
            <Route path="/register" element={<Register />} />
            <Route path="/login" element={<Login />} />
            <Route path="/logout" element={<Logout />} />
            <Route path="/profile" element={<Profile />} />
            <Route path="/courses/:courseId" element={<CourseView />} />
            <Route path='/add-course' element={<AddCourse/>} />

            <Route path="*" element={<NotFound />} />
          </Routes>
        </Container>
      </Router>
    </UserProvider>
  );
}

export default App;

/**
 * Mini Activity 2
 * Import the Highlights component
 * Add the Highlights component in the JSX inside the Container and after the Banner Component 
 * 2 mins
 */