import { AuthFormState, ForgetPassFormState } from "@/modules/authentication/authFormState"
import { useState } from "react"

import LogoTitle from "../login-signup/LogoTitle"
import ForgetPassFormInPayment from "./ForgetPassFormInPayment"
import { currentUserInfoInPaymentStore } from "@/app/store/userInfoStore"
import PinCodeMessage from "../login-signup/forget password/PinCodeMessage"
import PinCodeInPayment from "./PinCodeInPayment"

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

const ForgetPasswordInPayment = ({ setOpen, files, selectedAddress, selectedPayment, notes }: Props) => {
  const { paymentPhone } = currentUserInfoInPaymentStore()
  const [forgetFormState, setForgetState] = useState<ForgetPassFormState>("phone")

  const renderer: { [k in ForgetPassFormState]: JSX.Element } = {
    phone: (
      <div className="py-8">
        <LogoTitle title="verify_phone" />
        <ForgetPassFormInPayment setForgetState={setForgetState} phone={paymentPhone} />
      </div>
    ),
    pinCodeMessage: <PinCodeMessage setForgetState={setForgetState} phone={paymentPhone} />,
    pinCode: <PinCodeInPayment setForgetState={setForgetState} phone={paymentPhone} setOpen={setOpen} selectedAddress={selectedAddress} selectedPayment={selectedPayment} files={files} notes={notes} />,
  }

  return renderer[forgetFormState]
}

export default ForgetPasswordInPayment