import React, { useEffect } from 'react';
import { useParams, useNavigate } from 'react-router-dom';
import { Box } from '@mui/material';

import { SetSnackType } from '../components/Snack';
import { LoadingComponent } from '../components/LoadingComponent';
import { User, Guest, Candidate } from 'types/types';
import { useAuth } from 'hooks/AuthContext';
import { useAppState, useSelectedCandidate } from 'hooks/GlobalContext';

interface CandidateRouteProps {
  guest?: Guest | null;
  user?: User | null;
}

const CandidateRoute: React.FC<CandidateRouteProps> = (props: CandidateRouteProps) => {
  const { apiClient } = useAuth();
  const { selectedCandidate, setSelectedCandidate } = useSelectedCandidate();
  const { setSnack } = useAppState();
  const { username } = useParams<{ username: string }>();
  const navigate = useNavigate();

  useEffect(() => {
    if (selectedCandidate?.username === username || !username) {
      return;
    }
    const getCandidate = async (reference: string): Promise<void> => {
      try {
        const result: Candidate = await apiClient.getCandidate(reference);
        setSelectedCandidate(result);
        navigate('/chat');
      } catch {
        setSnack(`Unable to obtain information for ${username}.`, 'error');
        navigate('/');
      }
    };

    getCandidate(username);
  }, [setSelectedCandidate, selectedCandidate, username, navigate, setSnack, apiClient]);

  if (selectedCandidate?.username !== username) {
    return (
      <Box>
        <LoadingComponent
          loadingText="Fetching candidate information..."
          loaderType="linear"
          withFade={true}
          fadeDuration={1200}
        />
      </Box>
    );
  } else {
    return <></>;
  }
};

export { CandidateRoute };