"use client"
import sendPinCode from "@/app/api-requests/sendPinCode"
import uploadInvoice from "@/app/api-requests/uploadInvoice"
import { currentUserInfoInPaymentStore } from "@/app/store/userInfoStore"
import Input from "@/components/ui/Input"
import MainButton from "@/components/ui/MainButton"
import { Form } from "@/components/ui/form"
import TranslateClient from "@/components/ui/localization/TranslateClient"
import { toast } from "@/components/ui/use-toast"
import { ForgetPassFormState } from "@/modules/authentication/authFormState"
import { zodResolver } from "@hookform/resolvers/zod"
import { useEffect } from "react"
import { useForm } from "react-hook-form"
import { z } from "zod"

type Props = {
  setForgetState: React.Dispatch<React.SetStateAction<ForgetPassFormState>>
  phone: string
  setOpen: React.Dispatch<React.SetStateAction<boolean>>
  selectedAddress: Address_TP | null
  selectedPayment: any
  files: File[]
  notes: string
}

const formSchema = z.object({
  pin_code: z.string().min(4),
})

const PinCodeFormInPayment = ({
  setForgetState,
  phone,
  setOpen,
  selectedAddress,
  selectedPayment,
  files,
  notes,
}: Props) => {
  const form = useForm<z.infer<typeof formSchema>>({
    resolver: zodResolver(formSchema),
    defaultValues: {
      pin_code: "",
    },
  })
  const { data, isLoading, mutate } = sendPinCode()
  const { isLoading: isUploadingInvoice, mutate: mutateInvoice } = uploadInvoice()

  const { paymentUsername, paymentTitle, paymentEmail, paymentPhone } = currentUserInfoInPaymentStore()

  function onSubmit({ pin_code }: z.infer<typeof formSchema>) {
    mutate({
      code: +pin_code,
      phone: +phone,
    })
  }
  useEffect(() => {
    if (data) {
      if (!data?.errors) {
        if (data?.message === "success") {
          mutateInvoice({
            files: files.flat(Infinity),
            addressId: selectedAddress?.id,
            paymentMethodId: selectedPayment?.id,
            notes: notes,
            username: paymentUsername,
            title: paymentTitle,
            email: paymentEmail,
            phone: paymentPhone,
          })
          // setForgetState("phone")
          setOpen(false)
          toast({
            title: "success",
            description: "pin code submitted successfully ",
            className: "bg-green-700 text-white rounded-xl",
          })
        }
      }
    }
  }, [data])

  return (
    <Form {...form}>
      <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-4 capitalize mt-8">
        <Input form={form} placeholder="pin_code" name="pin_code" label="pin_code" />

        <MainButton intent={isLoading ? "loading" : "primary"} type="submit" size="sm" fullWidth className="!mt-10">
          <TranslateClient text="submit" />
        </MainButton>
      </form>
    </Form>
  )
}

export default PinCodeFormInPayment