import './App.css';
import React from 'react';
import { useState, useEffect } from "react";
import { BrowserRouter as Router, Route, Routes } from "react-router-dom";
//Components
import Navbar from './Components/Navbar';
import Footer from './Components/Footer';
//Pages
import Registration from "./pages/Registration";
import Login from "./pages/Login";
import Pricing from './pages/Pricing';
import BikeMap from './pages/Map';
import StripeSuccess from './pages/StripeSuccess';
import AdminConsole from './pages/admin/AdminConsole';
import AddUser from './pages/admin/users/AddUser';
import EditUserHelper from './pages/admin/users/EditUserHelper';
import AddStation from './pages/admin/stations/AddStation';
import DeleteStation from './pages/admin/stations/DeleteStation';
import AddBike from './pages/admin/bikes/AddBike';
import DeleteBike from './pages/admin/bikes/DeleteBike';
import DeletedBikeList from './pages/admin/bikes/DeletedBikeList';
//import DeletedBikeList from './pages/admin/bikes/DeletedBikeList';
import RentBike from './pages/rentals/RentBike';
import UserStationList from './pages/UserStationList';
import ReturnBike from './pages/rentals/ReturnBike';
import ReportForm from './pages/reports/ReportForm';
import DeleteReport from './pages/admin/reports/DeleteReport';
import ViewReport from './pages/admin/reports/ViewReport';
import AccountInfo from './pages/AccountInfo';
import AdminUsers from './pages/admin/users/AdminUsers';
import AdminPromos from './pages/admin/promo/AdminPromos';
import AddPromo from './pages/admin/promo/AddPromo';
import DeletePromo from './pages/admin/promo/DeletePromo';
import SendPromo from './pages/admin/promo/SendPromo';
import UserDashboard from './pages/rentals/UserDashboard';
import AdminStations from './pages/admin/stations/AdminStations';
import AdminBikes from './pages/admin/bikes/AdminBikes';
import AdminReports from './pages/admin/reports/AdminReports';
import AdminRentals from './pages/admin/rental/AdminRentals';
import StripeRegister from "./pages/StripeRegister";
//React helpers and API
import { AuthContext } from "./helpers/AuthContext";
import axios from 'axios';
import EditBikeHelper from './pages/admin/bikes/EditBikeHelper';
import EditStationHelper from './pages/admin/stations/EditStationHelper';
import ProfileHelper from './pages/profile/ProfileHelper';
import EditRentalHelper from './pages/admin/rental/EditRentalHelper';
import DeleteRental from './pages/admin/rental/DeleteRental';
import TransferBikes from './pages/admin/stations/TransferBikes';
import DeleteUser from './pages/admin/users/DeleteUser';
// import StripeRegister from "./pages/Stripe";
//React helpers and API
import AuthConsole from './pages/AuthConsole';
import UserConsole from './pages/UserConsole';
import MaintenanceList from './pages/admin/bikes/MaintenanceList';
import MaintenanceHistory from './pages/admin/bikes/MaintenanceHistory';
//Material

export default function App() {
  const [authState, setAuthState] = useState({});


  useEffect(() => {
    if (!localStorage.getItem('accessToken')) {
      return;
    }
    axios.get('/api/auth/details', {
      headers: {
        Authorization: 'Bearer ' + localStorage.getItem('accessToken')
      }
    }).then(response => {
      if (response.data.username) {
        response.data.roles = response.data.roles.map(role => {
          return role.name.replace('ROLE_', ''); //USER ADMIN
        });
        setAuthState({ ...response.data, loggedIn: true })
      } else {
        setAuthState({ loggedIn: false })
      }
    }).catch(err => {
      setAuthState({ loggedIn: false })
      if (err.response && err.response.data.message.includes("User not authenticated")) {
        localStorage.clear();
      }
    });
  }, [setAuthState]);

  return (
    <div className='bg-grey' >
      <Router>
        <AuthContext.Provider value={{ authState, setAuthState }}>
          <Navbar />
          <div className='header-buffer'></div>
          <div className='max-height mb-5 pb-5 bg-grey'>
            <Routes>
              <Route path='/pricing' element={<Pricing />} />
              <Route path='/map' element={<BikeMap />} />
              <Route path='/registration' element={<Registration />} />
              <Route path='/login' element={<Login />} />
              <Route path='/' element={<AuthConsole />} >
                {/* ********************************** Authorized ************************************ */}
                <Route path='profile' element={<ProfileHelper />} />
                <Route path='account' element={<AccountInfo />} />
                {/* ********************************** User ************************************ */}
                <Route element={<UserConsole />}>
                  <Route path='registration/stripe' element={<StripeRegister />} />
                  <Route path='registration/success' element={<StripeSuccess />} />
                  <Route path='reports' element={<ReportForm />} />
                  <Route path='dashboard/history' element={<UserDashboard />} />
                  <Route path='stations/rent-bike/:id' element={<RentBike />} />
                  <Route path='stations/return-bike/:id' element={<ReturnBike />} />
                  <Route path='stations/list' element={<UserStationList />} />
                </Route>
                {/* end user */}
                {/* ********************************** Admin ************************************ */}
                <Route path='admin' element={<AdminConsole />}>
                  {/* ***** users utilities ***** */}
                  <Route path='users' element={<AdminUsers />} >
                    <Route path='update/:id' element={<EditUserHelper />} />
                    <Route path='create' element={<AddUser />} />
                    <Route path='delete/:id' element={<DeleteUser />} />
                  </Route>
                  {/* ***** stations utilities ***** */}
                  <Route path='stations' element={<AdminStations />} >
                    <Route path='update/:id' element={<EditStationHelper />} />
                    <Route path='delete/:id' element={<DeleteStation />} />
                    <Route path='create' element={<AddStation />} />
                    <Route path='transfer-bikes/:id' element={<TransferBikes />} />
                  </Route>
                  {/* ***** bikes utilities ***** */}
                  <Route path='bikes' element={<AdminBikes />} >
                    <Route path='deleted-bikes' element={<DeletedBikeList />} />
                    <Route path='delete/:id' element={<DeleteBike />} />
                    <Route path='update/:id' element={<EditBikeHelper />} />
                    <Route path='create' element={<AddBike />} />
                    <Route path='maintenance' element={<MaintenanceList />} />
                    <Route path='maintenance/history' element={<MaintenanceHistory />} />
                  </Route>
                  {/* ***** reports utilities ***** */}
                  <Route path='reports' element={<AdminReports />} >
                    <Route path='delete/:id' element={<DeleteReport />} />
                    <Route path='view/:id' element={<ViewReport />} />
                  </Route>
                  {/* ***** promo utilities ***** */}
                  <Route path='promos' element={<AdminPromos />} >
                    <Route path='create' element={<AddPromo />} />
                    <Route path='delete/:id' element={<DeletePromo />} />
                    <Route path='send' element={<SendPromo />} />
                  </Route>
                  {/* ***** rental utilities ***** */}
                  <Route path='rentals' element={<AdminRentals />} >
                    <Route path='update/:id' element={<EditRentalHelper />} />
                    <Route path='delete/:id' element={<DeleteRental />} />
                  </Route>
                </Route>
                {/* end admin */}
              </Route>
              {/* end authorized */}
            </Routes>
          </div>
        </AuthContext.Provider>
      </Router>
      <div className='footer-buffer mt-5'></div>
      <Footer />
    </div>
  );
}

