"use client"
import sendPinCode from "@/app/api-requests/sendPinCode"
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>>
  setToken: React.Dispatch<React.SetStateAction<string>>
  phone: string
}

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

const PinCodeForm = ({ setForgetState, phone, setToken }: Props) => {
  const form = useForm<z.infer<typeof formSchema>>({
    resolver: zodResolver(formSchema),
    defaultValues: {
      pin_code: "",
    },
  })
  const { data, isLoading, mutate } = sendPinCode()
  function onSubmit({ pin_code }: z.infer<typeof formSchema>) {
    mutate({
      code: +pin_code,
      phone,
    })
  }
  useEffect(() => {
    if (data) {
      if (!data?.errors) {
        setToken(data?.data)
        setForgetState("changePass")
        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 PinCodeForm