import { Button, FormField, InputField, TextareaField } from '@/components/ui';
import { useSubmitContactForm } from '@/hooks/useSubmitContactForm';
import { type ContactFormType, contactFormSchema } from '@/schemas/contact-form.schema';
import { zodResolver } from '@hookform/resolvers/zod';
import { useForm } from 'react-hook-form';

interface Props {
  onClose?: () => void;
  carName?: string;
}
export const ContactForm = ({ carName, onClose }: Props) => {
  const {
    register,
    handleSubmit,
    formState: { errors, isSubmitting },
  } = useForm<ContactFormType>({
    resolver: zodResolver(contactFormSchema),
    mode: 'onTouched',
  });

  const { isLoading, handleSubmitContactForm } = useSubmitContactForm();

  const onSubmit = async (data: ContactFormType) => {
    const result = await handleSubmitContactForm(data, carName);
    if (!result) return;
    onClose?.();
  };
  return (
    <form className="w-full" onSubmit={handleSubmit(onSubmit)} noValidate>
      <div className="w-full items-center justify-between gap-24 lg:flex">
        <FormField label="Nombre" className="flex-1" fieldName="name" error={errors.name?.message}>
          <InputField
            className="w-full"
            placeholder="Tu nombre"
            {...register('name')}
            error={!!errors.name?.message}
            aria-invalid={!!errors.name?.message}
            aria-describedby="name-error"
          />
        </FormField>
        <FormField
          label="Apellido"
          className="flex-1"
          fieldName="surname"
          error={errors.surname?.message}
        >
          <InputField
            className="w-full"
            placeholder="Tu apellido"
            {...register('surname')}
            error={!!errors.surname?.message}
            aria-invalid={!!errors.surname?.message}
            aria-describedby="surname-error"
          />
        </FormField>
      </div>
      <div className="w-full items-center justify-between gap-24 lg:flex">
        <FormField
          label="Teléfono"
          className="flex-1"
          fieldName="phone"
          error={errors.phone?.message}
        >
          <InputField
            className="w-full"
            placeholder="Tu número telefónico"
            {...register('phone')}
            error={!!errors.phone?.message}
            aria-invalid={!!errors.phone?.message}
            aria-describedby="phone-error"
          />
        </FormField>
        <FormField label="Email" className="flex-1" fieldName="email" error={errors.email?.message}>
          <InputField
            className="w-full"
            type="email"
            placeholder="Tu correo electrónico"
            {...register('email')}
            error={!!errors.email?.message}
            aria-invalid={!!errors.email?.message}
            aria-describedby="email-error"
          />
        </FormField>
      </div>
      <FormField label="Mensaje o consulta" fieldName="message" error={errors.message?.message}>
        <TextareaField
          rows={4}
          className="w-full"
          placeholder="Contanos qué estás buscando..."
          {...register('message')}
          error={!!errors.message?.message}
          aria-invalid={!!errors.message?.message}
          aria-describedby="message-error"
        />
      </FormField>

      <div className="flex w-full items-center justify-center">
        <Button type="submit" className="mt-12" disabled={isSubmitting || isLoading}>
          Enviar consulta
        </Button>
      </div>
    </form>
  );
};