import { FC, useContext, useEffect } from 'react';
import { Navigate, useLocation } from 'react-router-dom';

import {
  AuthenticatedContext,
  AuthenticatedContextValue,
  AuthenticationContext
} from '../../contexts/authentication/context';
import { storeLoginRedirect } from '../../api/authentication';

import { RequiredChildrenProps } from '../../utils';

const RequireAuthenticated: FC<RequiredChildrenProps> = ({ children }) => {
  const authenticationContext = useContext(AuthenticationContext);
  const location = useLocation();

  useEffect(() => {
    if (!authenticationContext.me) {
      storeLoginRedirect(location);
    }
  });

  return authenticationContext.me ? (
    <AuthenticatedContext.Provider value={authenticationContext as AuthenticatedContextValue}>
      {children}
    </AuthenticatedContext.Provider>
  ) : (
    <Navigate to="/unauthorized" />
  );
};

export default RequireAuthenticated;