/* eslint-disable @typescript-eslint/no-misused-promises */
import {FC, useEffect} from 'react'
import { useForm, SubmitHandler } from "react-hook-form";
import Logo from '../assets/logo.png'
import { Link, useNavigate } from 'react-router-dom';
import { useAppSelector, useAppDispatch } from '../hooks/redux';
import { login } from '../store/reducers/UserSlice';

type Form = {
    email: string,
    password: string,
};

const LoginForm: FC = () => {
    const navigate = useNavigate();
    const dispatch = useAppDispatch();
    const {isAuth} = useAppSelector(state => state.UserSlice);
    const { register, handleSubmit, formState: {isSubmitSuccessful} } = useForm<Form>();
    
    useEffect(() => {
        if(isSubmitSuccessful) {
            if(isAuth) {
                navigate('/');
            }  
        }   
    }, [isSubmitSuccessful]) // eslint-disable-line react-hooks/exhaustive-deps
 
    const onSubmit: SubmitHandler<Form> = async (data) => {
        await dispatch(login({email: data.email, password: data.password}));
    }

    return (
        <section className="flex items-center h-screen">
            <form onSubmit={handleSubmit(onSubmit)} className='bg-white container mx-auto flex flex-col p-10 max-w-2xl'>
                <img className='w-52 self-center mb-5' src={ Logo } alt="logo" />
                <h1 className='text-2xl font-semibold tracking-wider text-gray-800 capitalize '>Login to your account</h1>
                <p className='mt-4 text-gray-500 mb-5'>Let's get you all set up so you can verify your personal account and begin setting up your profile.</p>
                <div className="flex flex-col mb-5">
                    <label className="block text-sm text-gray-600 " htmlFor="email">Email:</label>
                    <input id='email' className='block w-full px-5 py-3 mt-2 text-gray-700 placeholder-gray-400 bg-white border border-gray-200 rounded-md     focus:border-[#fbceb1]  focus:ring-[#fbceb1] focus:outline-none focus:ring focus:ring-opacity-40' {...register("email", { required: true })} placeholder='Email'/>
                </div>
                <div className="flex flex-col mb-5">
                    <label className="block text-sm text-gray-600 " htmlFor="password">Password:</label>
                    <input id='password' className='block w-full px-5 py-3 mt-2 text-gray-700 placeholder-gray-400 bg-white border border-gray-200 rounded-md     focus:border-[#fbceb1]  focus:ring-[#fbceb1] focus:outline-none focus:ring focus:ring-opacity-40' {...register("password", { required: true })} placeholder='Password'/>
                </div>
                <button className='flex items-center justify-center mt-2 w-full px-6 py-3 text-sm tracking-wide text-white hover:text-[#fbceb1] capitalize transition-colors duration-300 transform bg-gray-800 rounded-md focus:outline-none focus:ring focus:ring-gray-300 focus:ring-opacity-50'>Login</button>
                <p className='mt-5 text-gray-700'>Dont have account? <Link className='text-[#fbceb1]' to={'/register'}>Sign up here.</Link></p>
            </form>     
        </section>
    )
}

export default LoginForm;