import { useContext } from "react";
import { Route, BrowserRouter as Router, Routes } from "react-router-dom";
import GlobalStateContext from "./Contexts/GlobalStateContext";
import DefaultLayout from "./Layouts/DefaultLayout";
import Login from "./Pages/Login";
import { RouteLink } from "./Routes/Routes";
import LoginOtp from "./Pages/OnBoarding/LoginOtp";
import CreatePass from "./Pages/OnBoarding/CreatePass";
import LoginWithPass from "./Pages/OnBoarding/LoginWithPass";

function App() {
  const context = useContext(GlobalStateContext);
  if (!context)
    throw new Error("App must be used within a GlobalStateProvider");
  const { isAuthenticate } = context;

  return (
    <Router>
      <Routes>
        <Route path="/login" element={<LoginWithPass/>} />
        <Route path="/forgotPassword" element={<Login />} />
        <Route path="/login-otp" element={<LoginOtp />} />
        <Route path="/create-password" element={<CreatePass/>}/>
        <Route
          path="/*"
          element={
            isAuthenticate === true ? (
              <DefaultLayout>
                <Routes>
                  {RouteLink.map(({ path, Component }, index) => (
                    <Route key={index} path={path} element={<Component />} />
                  ))}
                </Routes>
              </DefaultLayout>
            ) : (
              <LoginWithPass />
            )
          }
        />
        <Route path="*" element={<LoginWithPass />} />
      </Routes>
    </Router>
  );
}

export default App;
