/* eslint-disable @typescript-eslint/strict-boolean-expressions */
/* eslint-disable @typescript-eslint/no-misused-promises */
/* eslint-disable @typescript-eslint/explicit-function-return-type */
import React from 'react'
import { zodResolver } from '@hookform/resolvers/zod'
import { useForm } from 'react-hook-form'
import type { z } from 'zod'
import { contactSchema } from '@/validations/contactScheme'
import {
  Form,
  FormControl,
  FormField,
  FormItem,
  FormMessage
} from '@/components/ui/form'
import { Input } from '@/components/ui/input'
import { Textarea } from '@/components/ui/textarea'
import { toast } from 'sonner'
import { actions } from 'astro:actions'
import { Toaster } from '../ui/sonner'

function ContactForm () {
  const form = useForm<z.infer<typeof contactSchema>>({
    resolver: zodResolver(contactSchema),
    defaultValues: {
      name: '',
      email: '',
      cellPhoneNumber: '',
      message: ''
    }
  })

  const sendEmail = async (values: any) => {
    const { error, data } = await actions.sendContactForm(values)
    if (error) throw new Error()
    return data
  }

  const onSubmit = (values: z.infer<typeof contactSchema>) => {
    toast.promise(sendEmail(values), {
      loading: 'Enviando...',
      success: (data) => {
        form.reset({
          name: '',
          email: '',
          message: ''
        })
        return 'Formulario enviado correctamente'
      },
      error: 'Lo sentimos, hubo un error al enviar el formulario.'
    })
  }

  return (
        <section className="bg-[#F7F7F7] -mb-[100px] h-auto mt-[100px]">
            <div className="wrapper">
                <div className="flex flex-col xl:flex-row bg-white shadow-2xl  lg:h-[116.5%] -mt-[100px]">
                    <div className=" p-4 md:p-[100px] w-full">
                        <span className="text-primary font-semibold text-sm"
                        >TE ESCUCHAMOS</span
                        >
                        <h2 className="text-[2.5rem] font-semibold mb-12">Contáctanos</h2>
                        <Form {...form}>
                            <form onSubmit={form.handleSubmit(onSubmit)} className="flex flex-col gap-6 ">
                                <FormField
                                    control={form.control}
                                    name="name"
                                    render={({ field }) => (
                                        <FormItem className="w-full">
                                            <FormControl >
                                                <Input type="text" className="h-12 border px-4 outline-primary" placeholder="Nombre Propietario" {...field} />
                                            </FormControl>
                                            <FormMessage />
                                        </FormItem>
                                    )}
                                />

                                <FormField
                                    control={form.control}
                                    name="email"
                                    render={({ field }) => (
                                        <FormItem className="w-full">
                                            <FormControl >
                                                <Input type="text" className="h-12 border px-4 outline-primary"
                                                    placeholder="Email" {...field} />
                                            </FormControl>
                                            <FormMessage />
                                        </FormItem>
                                    )}
                                />
                                <FormField
                                    control={form.control}
                                    name="cellPhoneNumber"
                                    render={({ field }) => (
                                        <FormItem className="w-full">
                                            <FormControl >
                                                <Input
                                                    type="tel" className="h-12 border px-4 outline-primary"
                                                    placeholder="Celular" {...field}
                                                />
                                            </FormControl>
                                            <FormMessage />
                                        </FormItem>
                                    )}
                                />
                                <FormField
                                    control={form.control}
                                    name="message"
                                    render={({ field }) => (
                                        <FormItem className="w-full">
                                            <FormControl >
                                            <Textarea
                                                placeholder="Mensaje"
                                                className="border p-4 outline-primary"
                                                {...field}
                                            />
                                            </FormControl>
                                            <FormMessage />
                                        </FormItem>
                                    )}
                                />

                                <div>
                                    <button
                                        className="items-center justify-center bg-primary text-white py-[15px] px-[30px]"
                                    >ENVIAR MENSAJE </button
                                    >
                                </div>
                            </form>
                        </Form>
                    </div>
                    <div className="w-full p-4 md:p-[100px]">
                        <img src="/assets/images/foto-previcar-staff.webp" alt="" />
                    </div>
                </div>
            </div>
            <Toaster richColors position="top-center" style={{ backgroundColor: 'white' }} />
        </section>

  )
}

export default ContactForm