import "./App.css";
import { Route } from "wouter";
import HomePage from "./pages/HomePage";
import LoginPage from "./pages/LoginPage";
import LogoutPage from "./pages/LogoutPage";
import RegisterPage from "./pages/RegisterPage";
import CoursePage from "./pages/CoursePage";
import AssignmentPage from "./pages/AssignmentPage";
import ManagePage from "./pages/ManagePage";
import ManageStudentsPage from "./pages/ManageStudentsPage";
import AuthenticatedRoute from "./components/AuthenticatedRoute";
import ManageAssignmentsPage from "./pages/ManageAssignmentsPage";
import ManageContentPage from "./pages/ManageContentPage";

const AuthRoute = ({ isAuthenticated = true, path, children }) => {
  return (
    <Route path={path}>
      <AuthenticatedRoute isAuthenticated={isAuthenticated}>
        {children}
      </AuthenticatedRoute>
    </Route>
  );
};

function App() {
  return (
    <div className="App">
      <AuthRoute path="/login" isAuthenticated={false}>
          <LoginPage />
      </AuthRoute>
      <AuthRoute path="/logout" isAuthenticated={false}>
          <LogoutPage />
      </AuthRoute>
      <AuthRoute path="/register" isAuthenticated={false}>
          <RegisterPage />
      </AuthRoute>

      <AuthRoute path="/">
          <HomePage />
      </AuthRoute>

      <Route path="/course/:id">
        {(params) => {
          return (
            <AuthenticatedRoute>
              <CoursePage id={params.id} />
            </AuthenticatedRoute>
          );
        }}
      </Route>

      <Route path="/assignment/:id">
        {(params) => {
          return (
            <AuthenticatedRoute>
              <AssignmentPage id={params.id} />
            </AuthenticatedRoute>
          );
        }}
      </Route>

      <AuthRoute path="/manage">
          <ManagePage />
      </AuthRoute>

      <Route path="/manage/:cid/students">
        {(params) => {
          return (
            <AuthenticatedRoute>
              <ManageStudentsPage cid={params.cid} />
            </AuthenticatedRoute>
          );
        }}
      </Route>

      <Route path="/manage/:id/content">
        {(params) => {
          return (
            <AuthenticatedRoute>
              <ManageContentPage cid={params.id} />
            </AuthenticatedRoute>
          );
        }}
      </Route>

      <Route path="/manage/:id/assignments">
        {(params) => {
          return (
            <AuthenticatedRoute>
              <ManageAssignmentsPage cid={params.id} />
            </AuthenticatedRoute>
          );
        }}
      </Route>

    </div>
  );
}

export default App;