"use client"
import Input from "@/components/ui/Input"
import MainButton from "@/components/ui/MainButton"
import TextAreaField from "@/components/ui/Textarea"
import { Form } from "@/components/ui/form"
import TranslateClient from "@/components/ui/localization/TranslateClient"
import { useToast } from "@/components/ui/use-toast"
import useCurrentLanguage from "@/hooks/useCurrentLanguage"
import { postData } from "@/lib/requests"
import { zodResolver } from "@hookform/resolvers/zod"
import { useMutation } from "@tanstack/react-query"
import { useState } from "react"
import { useForm } from "react-hook-form"
import { z } from "zod"

const ContactForm = ({ lang }: { lang: Lang }) => {
  const { locale } = useCurrentLanguage()
  const formSchema = z.object({
    fullName: z.string().min(12, { message: locale?.["String_must_contain_at_least_12_character(s)"] }),
    phone: z
      .string()
      .min(9, { message: locale?.["invalid_mobile_number"] })
      .max(14, { message: locale?.["invalid_mobile_number"] })
      .refine(
        (val) => {
          return !isNaN(Number(val))
        },
        { message: locale?.["invalid_mobile_number"] }
      ),
    email: z
      .string()
      .email({ message: locale?.["invalid_email"] })
      .min(5, { message: locale?.["String_must_contain_at_least_5_character(s)"] }),
    message: z.string().min(10, { message: locale?.["String_must_contain_at_least_10_character(s)"] }),
  })

  const [loading, setLoading] = useState(false)
  const { toast } = useToast()

  const form = useForm<z.infer<typeof formSchema>>({
    resolver: zodResolver(formSchema),
    defaultValues: {
      fullName: "",
      phone: "",
      email: "",
      message: "",
    },
  })

  const { mutate, data, isPending } = useMutation({
    mutationKey: ["post-contact"],
    mutationFn: (values: any) =>
      postData({
        endpoint: "api/contacts",
        values,
        formData: true,
      }),
    onSuccess: (data) => {
      if (!!!data.errors) {
        // setIsSuccessModalOpen(true)
        // setResetFields(true)
        toast({
          title: locale?.["message_sent_successfully"],
          className: "bg-green-700 text-white rounded-xl",
        })
        form.reset()
      } else {
        toast({
          variant: "destructive",
          title: data?.message || data?.errors?.error?.[0] || locale?.["oops_something_went_wrong"],
          className: "bg-red-700 text-white rounded-xl",
        })
      }
    },
    onError: (error) => {
      toast({
        variant: "destructive",
        title: error?.message || locale?.["oops_something_went_wrong"],
        className: "bg-red-700 text-white rounded-xl",
      })
    },
  })

  async function onSubmit(values: z.infer<typeof formSchema>) {
    values.phone = "+20" + values.phone
    mutate(values)

    // TODO: use loading of react query insted of this loading and call mutate here and onSuccess show success toast

    // setLoading(true)
    // try {
    //     await doCredentialLogin(values)
    //     setLoading(false)
    //     setOpen(false)
    //     toast({
    //         title: locale?.["signed_in_susccfully"],
    //         className: "bg-green-700 text-white rounded-xl",
    //     })
    // } catch (error) {
    //     setLoading(false)
    //     toast({
    //         variant: "destructive",
    //         title: locale?.["invalid_data"],
    //         description: locale?.["wrong_email_or_password"],
    //         className: "bg-red-700 text-white rounded-xl",
    //     })
    // }
  }

  return (
    <div>
      <h2 className="text-3xl md:text-4xl lg:text-5xl mb-8">
        <TranslateClient text="contact" />
      </h2>
      <Form {...form}>
        <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-4 capitalize">
          {/* fullName */}
          <Input
            form={form}
            placeholder="fullName"
            name="fullName"
            label="fullName"
            className="bg-white border border-gray-300"
          />
          {/* phone */}
          <Input
            form={form}
            placeholder="phone"
            name="phone"
            label="phone"
            className="bg-white border border-gray-300"
            type="tel"
          />
          {/* email */}
          <Input
            form={form}
            placeholder="email"
            name="email"
            label="email"
            className="bg-white border border-gray-300"
            type="email"
          />

          {/* message */}
          <TextAreaField
            form={form}
            name="message"
            placeholder="message"
            label="message"
            required
            className="border border-gray-300"
          />

          <MainButton type="submit" size="sm" disabled={loading} intent={loading ? "loading" : "primary"} fullWidth>
            <TranslateClient text="login" />
          </MainButton>
        </form>
      </Form>
    </div>
  )
}

export default ContactForm