import React, { Component, useContext } from 'react';
import './App.css';
import { Routes, Route, Outlet, Navigate } from 'react-router-dom';
import SignIn from './llm-fe/pages/SignIn/SignIn';
import PasswordReset from './llm-fe/pages/PasswordReset/PasswordReset';
import NotFound from './llm-fe/pages/NotFound/NotFound';
import { AuthContext } from './llm-fe/contexts/AuthContext';
import TermsOfService from './llm-fe/pages/TermsOfService/TermsOfService';
import SetPassword from './llm-fe/components/SetPassword/SetPassword';
import AsyncDashboard2 from './llm-fe/pages/AsyncDashboard2/AsyncDashboard2';
import FeedbackPage2 from './llm-fe/pages/FeedbackPage2/FeedbackPage2';
import DocumentStoragePage from './llm-fe/pages/DocumentStoragePage/DocumentStoragePage';
import Account2 from './llm-fe/pages/Account2/Account2';
import AnalyticsPage from './llm-fe/pages/Analytics/Analytics';
import PasswordResetConfirmation from './llm-fe/pages/PasswordResetConfirmation/PasswordReset';
import GlobalThemeWrapper from './llm-fe/components/GlobalThemeWrapper/GlobalThemeWrapper';
import Tracker from './llm-fe/components/Tracker/Tracker';

const ProtectedRoutes = () => {
  const { authenticated, loading } = useContext(AuthContext);
  if (loading) {
    return (
      <div>Loading</div>
    )
  }
  if (!authenticated) return <Navigate to='/signin/' replace />
  //if(!needsNewPassword) return <Navigate to='/password_reset/' replace/>

  return <Outlet key={Date.now()} />
}



class App extends Component {

  render() {
    return (
      <GlobalThemeWrapper>
        <Tracker />
        <div className='site'>
          <main>
            <div className="main-container">


              <Routes>
                <Route path='*' element={<NotFound />} />

                <Route path={"/signin/"} Component={SignIn} />
                <Route path={"/password_reset/"} Component={PasswordReset} />
                <Route path={"/password_reset_confirmation/"} Component={PasswordResetConfirmation} />
                <Route path={'/set_password/'} Component={SetPassword} />



                <Route element={<ProtectedRoutes />}>
                  <Route path={"/"} index={true} Component={AsyncDashboard2} />
                  <Route path={"/account/"} Component={Account2} />
                  <Route path={"/document_storage"} Component={DocumentStoragePage} />
                  <Route path={"/terms_of_service/"} Component={TermsOfService} />
                  <Route path={"/feedback/"} Component={FeedbackPage2} />
                  <Route path={"/analytics/"} Component={AnalyticsPage} />

                </Route>

              </Routes>

            </div>

          </main>
        </div>
      </GlobalThemeWrapper>


    );

  }

}

export default App;