import { useState } from 'react';
import { useForm, SubmitHandler, FieldValues } from 'react-hook-form';

const ContactForm = () => {
  const {
    register,
    handleSubmit,
    formState: { errors },
  } = useForm();

  const [submitted, setSubmitted] = useState(false);

  const handleFormSubmission: SubmitHandler<FieldValues> = async (data) => {
    console.log(data)

    const res = await fetch('/api/contact', {
      method: 'POST',
      headers: {
        'Accept': 'application/json, text/plain, */*',
        'Content-Type': 'application/json'
      },
      body: JSON.stringify(data)
    });

    console.log('Response received')
    if (res.status === 200) {
      console.log('Response succeeded!')
      setSubmitted(true)
    }
  };

  const handleFormError: SubmitHandler<FieldValues>  = (error) => {
    console.log(error)
  };

  return (
    <div className='w-full flex flex-row justify-center'>
        <form className=" w-1/2" onSubmit={handleSubmit(handleFormSubmission, handleFormError)}>
          <div className="flex flex-col justify-center h-full">
            <div className=' flex flex-col justify-between space-y-4 w-full'>
              <div className='flex flex-row justify-between space-x-2'>
                <div className='w-1/2'>
                  <input placeholder='First Name' className='w-full' {...register('firstName', { required: true })} />
                  {errors.firstName && <p>First name is required.</p>}
                </div>
                <div className='w-1/2'>
                  <input placeholder='Last Name' className='w-full' {...register('lastName', { required: true })} />
                  {errors.lastName && <p>Last name is required.</p>}
                </div>
              </div>
              <div className='flex flex-col space-y-4 w-full'>
                <div>
                  <input placeholder='Email' type="email" className='w-full' {...register('email', { required: true })} />
                  {errors.email && <p>Email is required.</p>}
                </div>
                <div>
                  <select placeholder='Subject...' className='w-full' {...register('subject', { required: true })}>
                    <option>Subject...</option>
                    <option>Inquiry</option>
                    <option>Consultations</option>
                    <option>Want To Hire For Potential Job/Contract</option>
                  </select>
                  {errors.subject && <p>Subject is required.</p>}
                </div>
                <div className="flex flex-col w-full">
                  <textarea placeholder='Summary...' className="flex grow h-52" {...register('summary')} />
                  {errors.summary && <p>Please enter a message for your Project Inquiry.</p>}
                </div>

              </div>
              <input className="bg-blue-600 text-white rounded-sm cursor-pointer" type="submit" />
            </div>
          </div>
        </form>
    </div>
  );
};

export default ContactForm;