"use client"
import forgetPasswordPhoneRequest from "@/app/api-requests/forgetPasswordPhoneRequest"
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 useCurrentLanguage from "@/hooks/useCurrentLanguage"
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
}

const ForgetPassFormInPayment = ({ setForgetState, phone }: Props) => {
  const { locale } = useCurrentLanguage()

  const { data, mutate, isLoading } = forgetPasswordPhoneRequest()

  useEffect(() => {
    if (data) {
      if (!data?.errors) {
        setForgetState("pinCodeMessage")
        toast({
          title: "success",
          description: "pin code has sent to you",
          className: "bg-green-700 text-white rounded-xl",
        })
      }
    }
  }, [data])

  return (
    <div>
      <p>phone_number_that_sends_the_verification_code</p>
      <span className="text-mainBlue">{phone}</span>

      <MainButton
        disabled={isLoading}
        intent={isLoading ? "loading" : "primary"}
        type="button"
        onClick={() => mutate({ phone })}
        size="sm"
        fullWidth
        className="!mt-10"
      >
        <TranslateClient text="submit" />
      </MainButton>
    </div>
  )

  return (
    <Form {...form}>
      <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-4 capitalize mt-8">
        <div>
          <p>phone_number_that_sends_the_verification_code</p>
          <span className="text-mainBlue">{phone}</span>
        </div>
        {/* <Input form={form} placeholder="phone" name="phone" label="phone_number_that_sends_the_verification_code" type="number" className="text-mainBlue bg-white" disabled  /> */}
        <MainButton
          disabled={isLoading}
          intent={isLoading ? "loading" : "primary"}
          type="submit"
          size="sm"
          fullWidth
          className="!mt-10"
        >
          <TranslateClient text="submit" />
        </MainButton>
      </form>
    </Form>
  )
}

export default ForgetPassFormInPayment