"use client"
import Loading from "@/app/[lang]/loading"
import getProfile from "@/app/api-requests/getProfile"
import { Form } from "@/components/ui/form"
import Input from "@/components/ui/Input"
import MainButton from "@/components/ui/MainButton"
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 { useEffect } from "react"
import { useForm } from "react-hook-form"
import { z } from "zod"
import InputImage from "./InputImage"
import { userInfoDefaultValues, userInfoSchema } from "@/lib/validations/shemas/userInfoSchema"
import { userInfoStore } from "@/app/store/userInfoStore"

const ProfileInformationForm = () => {
  const { locale } = useCurrentLanguage()
  const { toast } = useToast()
  const { isLoading, refetchProfile, userData } = getProfile()
  const { updateUserInfo } = userInfoStore()

  const form = useForm<z.infer<typeof userInfoSchema>>({
    resolver: zodResolver(userInfoSchema),
    defaultValues: userInfoDefaultValues,
  })

  useEffect(() => {
    if (userData) {
      form.setValue("email", userData?.email)
      form.setValue("title", userData?.title)
      form.setValue("phone", userData?.phone)
      form.setValue("username", userData?.username || userData?.title)
      // form.setValue("image", userData?.image?.[0]?.original_url)
      
      updateUserInfo({
        email: userData?.email,
        title: userData?.title,
        phone: userData?.phone,
        username: userData?.username,
        is_verify: userData?.is_verify,
      })
    }
  }, [userData])

  const { data, mutate, isPending, error } = useMutation({
    mutationKey: ["update-profile"],
    mutationFn: (values: any) =>
      postData({
        endpoint: `api/Profile`,
        values,
        formData: true,
      }),
    onSuccess: (data) => {
      if (!!!data.errors) {
        toast({
          title: locale?.["profile_information_update_successfully"],
          className: "bg-green-700 text-white rounded-xl",
        })
        refetchProfile()
        // setIsSuccessModalOpen(true)
        // setResetFields(true)
        // ---------------
        // if (type === "create") {
        //     form.reset()
        // }
        // queryClient.refetchQueries({ queryKey: ["about"] })
      }
    },
    onError: (error) => {
      toast({
        variant: "destructive",
        title: locale?.["oops_something_went_wrong"],
        className: "bg-red-700 text-white rounded-xl",
      })
    },
  })

  function onSubmit(values: z.infer<typeof userInfoSchema>) {
    if (values.image === null || !(values.image instanceof File)) {
      delete values.image
    }
    if (values.title === userData?.title) {
      delete values.title
    }
    if (values.username === userData?.username) {
      delete values.username
    }
    if (values.phone === userData?.phone) {
      delete values.phone
    }
    if (values.email === userData?.email) {
      delete values.email
    }

    mutate(values)
  }

  if (isLoading) return <Loading className="static py-8" />

  return (
    <div className="container my-24 relative">
      {/* profile form */}
      <Form {...form}>
        <form onSubmit={form.handleSubmit(onSubmit)}>
          <div className="container grid grid-cols-1 lg:grid-cols-2 gap-4 pt-28 pb-12 border border-mainBlue rounded-xl w-full">
            {/* name */}
            <Input
              className="bg-white border border-gray-400"
              form={form}
              placeholder="user_name"
              name="username"
              label="user_name"
            />

            {/* title */}
            <Input
              className="bg-white border border-gray-400"
              form={form}
              placeholder="titleName"
              name="title"
              label="titleName"
            />

            {/* email */}
            <Input
              className="bg-white border border-gray-400"
              form={form}
              placeholder="email"
              name="email"
              label="email"
            />

            {/* phone number */}
            <Input
              className="bg-white border border-gray-400"
              form={form}
              placeholder="phone"
              name="phone"
              label="phone"
              type="tel"
            />

            {/* profile image */}
            <div className="flex justify-center absolute top-[-70px] left-1/2 -translate-x-1/2">
              <InputImage form={form} name="image" id="image" imageToShow={userData?.image?.[0]?.original_url} />
            </div>

            {/* <Input
                            id="image"
                            type="file"
                            accept="image/*"
                            className="bg-white border border-gray-400"
                            form={form}
                            placeholder="picture"
                            name="image"
                            label="picture"
                        /> */}
          </div>
          {/* submit button */}
          <MainButton
            intent={isPending ? "loading" : "primary"}
            disabled={isPending}
            className="col-span-2 my-10"
            type="submit"
            size={"sm"}
            fullWidth
          >
            {locale?.save}
          </MainButton>
        </form>
      </Form>
    </div>
  )
}

export default ProfileInformationForm