import React, { Ref, ReactNode } from "react";
import { Route } from "react-router-dom";
import { Typography } from '@mui/material';

import { BackstoryPageProps } from '../BackstoryTab';
import { ConversationHandle } from '../Conversation';
import { User } from 'types/types';

import { ChatPage } from 'pages/ChatPage';
import { ResumeBuilderPage } from 'pages/ResumeBuilderPage';
import { DocsPage } from 'pages/DocsPage';
import { CreateProfilePage } from 'pages/CreateProfilePage';
import { VectorVisualizerPage } from 'pages/VectorVisualizerPage';
import { HomePage } from 'pages/HomePage';
import { BetaPage } from 'pages/BetaPage';
import { CandidateListingPage } from 'pages/CandidateListingPage';
import { JobAnalysisPage } from 'pages/JobAnalysisPage';
import { GenerateCandidate } from "pages/GenerateCandidate";
import { ControlsPage } from 'pages/ControlsPage';

const ProfilePage = () => (<BetaPage><Typography variant="h4">Profile</Typography></BetaPage>);
const BackstoryPage = () => (<BetaPage><Typography variant="h4">Backstory</Typography></BetaPage>);
const ResumesPage = () => (<BetaPage><Typography variant="h4">Resumes</Typography></BetaPage>);
const QASetupPage = () => (<BetaPage><Typography variant="h4">Q&A Setup</Typography></BetaPage>);
const SearchPage = () => (<BetaPage><Typography variant="h4">Search</Typography></BetaPage>);
const SavedPage = () => (<BetaPage><Typography variant="h4">Saved</Typography></BetaPage>);
const JobsPage = () => (<BetaPage><Typography variant="h4">Jobs</Typography></BetaPage>);
const CompanyPage = () => (<BetaPage><Typography variant="h4">Company</Typography></BetaPage>);
const LogoutPage = () => (<BetaPage><Typography variant="h4">Logout page...</Typography></BetaPage>);
const LoginPage = () => (<BetaPage><Typography variant="h4">Login page...</Typography></BetaPage>);
// const DashboardPage = () => (<BetaPage><Typography variant="h4">Dashboard</Typography></BetaPage>);
// const AnalyticsPage = () => (<BetaPage><Typography variant="h4">Analytics</Typography></BetaPage>);
// const SettingsPage = () => (<BetaPage><Typography variant="h4">Settings</Typography></BetaPage>);

interface BackstoryDynamicRoutesProps extends BackstoryPageProps {
  chatRef: Ref<ConversationHandle>;
  user?: User | null;
}
const getBackstoryDynamicRoutes = (props: BackstoryDynamicRoutesProps): ReactNode => {
  const { user, setSnack, submitQuery, chatRef } = props;
  let index=0
  const routes = [
    <Route key={`${index++}`} path="/" element={<HomePage/>} />,
    <Route key={`${index++}`} path="/chat" element={<ChatPage ref={chatRef} setSnack={setSnack} submitQuery={submitQuery} />} />,
    <Route key={`${index++}`} path="/docs" element={<DocsPage setSnack={setSnack} submitQuery={submitQuery} />} />,
    <Route key={`${index++}`} path="/docs/:subPage" element={<DocsPage setSnack={setSnack} submitQuery={submitQuery} />} />,
    <Route key={`${index++}`} path="/resume-builder" element={<ResumeBuilderPage setSnack={setSnack} submitQuery={submitQuery} />} />,
    <Route key={`${index++}`} path="/knowledge-explorer" element={<VectorVisualizerPage setSnack={setSnack} submitQuery={submitQuery} />} />,
    <Route key={`${index++}`} path="/find-a-candidate" element={<CandidateListingPage {...{ setSnack, submitQuery }} />} />,
    <Route key={`${index++}`} path="/job-analysis" element={<JobAnalysisPage />} />,
    <Route key={`${index++}`} path="/generate-candidate" element={<GenerateCandidate {...{ setSnack, submitQuery }} />} />,
    <Route key={`${index++}`} path="/settings" element={<ControlsPage {...{ setSnack, submitQuery }} />} />,
  ];

  if (!user) {
    routes.push(<Route key={`${index++}`} path="/register" element={(<BetaPage><CreateProfilePage /></BetaPage>)} />);
    routes.push(<Route key={`${index++}`} path="/login" element={<LoginPage />} />);
    routes.push(<Route key={`${index++}`} path="*" element={<BetaPage />} />);
  } else {

    routes.push(<Route key={`${index++}`} path="/logout" element={<LogoutPage />} />);

    if (user.userType === 'candidate') {
      routes.splice(-1, 0, ...[
          <Route key={`${index++}`} path="/profile" element={<ProfilePage />} />,
          <Route key={`${index++}`} path="/backstory" element={<BackstoryPage />} />,
          <Route key={`${index++}`} path="/resumes" element={<ResumesPage />} />,
          <Route key={`${index++}`} path="/qa-setup" element={<QASetupPage />} />,
      ]);
    }

    if (user.userType === 'employer') {
      routes.splice(-1, 0, ...[
          <Route key={`${index++}`} path="/search" element={<SearchPage />} />,
          <Route key={`${index++}`} path="/saved" element={<SavedPage />} />,
          <Route key={`${index++}`} path="/jobs" element={<JobsPage />} />,
          <Route key={`${index++}`} path="/company" element={<CompanyPage />} />,
      ]);
    }
  }

  routes.push(<Route key={`${index++}`} path="*" element={<BetaPage />} />);

  return routes;
};

export { getBackstoryDynamicRoutes };