import { useEffect } from 'react';
import MainLayout from '@/layouts/main-layout';
import LogInForm from '@components/app/log-in-form';
import Head from 'next/head';
import { useRouter } from 'next/router';
import { useUserContext } from '@contexts/UserContext';

export default function LogIn() {
  const { userData, session_valid, userSessionDataLoading } = useUserContext();
  const router = useRouter();

  useEffect(() => {
    if (session_valid && !userSessionDataLoading) {
      if (userData.emailVerified !== null) {
        router.push('/dashboard')
      }
      router.push('/verify-email')
    }
  }, [userSessionDataLoading])
  return (
    <MainLayout>
      <Head>
        <title>Super Fit | Login </title>
      </Head>
      <LogInForm />
    </MainLayout>
  );
}