/* eslint-disable @typescript-eslint/no-misused-promises */
import {FC, useEffect, useState} 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';
import Input from '../components/UI/Input';
import Button from '../components/UI/Button';
import AuthError from '../components/Modals/AuthError';
import { ServerError } from '../models/response/ServerError';

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

const LoginPage: FC = () => {
    const [modal, setModal] = useState<boolean>(false);
    const [modalError, setModalError] = useState<string>('');
    const navigate = useNavigate();
    const dispatch = useAppDispatch();
    const {isAuth} = useAppSelector(state => state.UserSlice);
    const { register, handleSubmit, formState: {errors, isSubmitSuccessful} } = useForm<Form>();

    useEffect(() => {
        if(isSubmitSuccessful) {
            if(isAuth) {
                navigate('/');
            }  
        }   
    }, [isSubmitSuccessful]) // eslint-disable-line react-hooks/exhaustive-deps

    const onSubmit: SubmitHandler<Form> = async (data) => {
        const response = await dispatch(login({email: data.email, password: data.password}));
        const res = response.payload as ServerError;
        if(res?.error) {
            setModal(true);
            setModalError(res.error)
        }
    }

    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>
                <Input wrapperClasses='mb-5' type="text" label='Email:' placeholder='Email' error={errors.email?.message} register={register('email', { required: "The field must be filled" })}/>
                <Input wrapperClasses='mb-5' type="text" label='Password:' placeholder='Password' error={errors.password?.message} register={register('password', { required: "The field must be filled" })}/>
                <Button>Login</Button>
                <p className='mt-5 text-gray-700'>Dont have account? <Link className='text-[#fbceb1]' to={'/register'}>Sign up here.</Link></p>
            </form>
            <AuthError modal={modal} setModal={setModal} error={modalError}/>
        </section>
    )
}

export default LoginPage;