/* eslint-disable @typescript-eslint/no-misused-promises */
import {FC, useContext} from 'react'
import { useForm, SubmitHandler } from "react-hook-form";
import { useNavigate, Link } from 'react-router-dom';
import { Context } from '../main';
import Logo from '../assets/logo.png'

const RegisterForm: FC = () => {

    type Form = {
        email: string,
        name: string,
        sname: string,
        password: string,
        confirm_password: string
    };

    const navigate = useNavigate();
    const {store} = useContext(Context);

    const { register, handleSubmit, watch } = useForm<Form>();
    const onSubmit: SubmitHandler<Form> = async (data) => {
        await store.registration(data.email, data.name, data.sname, data.password);
        if(store.isAuth) {
            navigate('/');
        }
    }

    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 '>Register To Get Started</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 })} type='email' placeholder='Email'/>
                </div>
                <div className="flex flex-col mb-5">
                    <label className="block text-sm text-gray-600 " htmlFor="name">First Name:</label>
                    <input id='name' 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("name", { required: true })} placeholder='First Name'/>
                </div>
                <div className="flex flex-col mb-5">
                    <label className="block text-sm text-gray-600 " htmlFor="sname">Last Name:</label>
                    <input id='sname' 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("sname", { required: true })} type='text' placeholder='Last Name'/>
                </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 })}  type='password' placeholder='Password'/>
                </div>
                <div className="flex flex-col mb-5">
                    <label className="block text-sm text-gray-600 " htmlFor="password">Confirm 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("confirm_password", 
                    { 
                        required: true,
                        validate: (val: string) => {
                            if (watch('password') != val) {
                                return "Your passwords do no match";
                            }
                        }, 
                    })}  type='password' placeholder='Confirm 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'>Register</button>
                <p className='mt-5 text-gray-700'>Already have an account ? <Link className='text-[#fbceb1]' to={'/login'}>Log In here.</Link></p>
            </form>
        </section>
    )
}

export default RegisterForm;