import {
  AuthFormState,
  ForgetPassFormState,
} from "@/modules/authentication/authFormState"
import { useState } from "react"
import LogoTitle from "../LogoTitle"
import ForgetPassForm from "./ForgetPassForm"
import PinCode from "./PinCode"
import PinCodeMessage from "./PinCodeMessage"
import ChangePassword from "./ChangePassword"

type Props = {
  setFormState: React.Dispatch<React.SetStateAction<AuthFormState>>
}

const ForgetPassword = ({ setFormState }: Props) => {
  const [forgetFormState, setForgetState] =
    useState<ForgetPassFormState>("phone")
  const [phone, setPhone] = useState("")
  const [token, setToken] = useState("")

  const renderer: { [k in ForgetPassFormState]: JSX.Element } = {
    phone: (
      <div className="py-8">
        <LogoTitle title="reset_password" />
        <ForgetPassForm
          setForgetState={setForgetState}
          setPhone={setPhone}
        />
      </div>
    ),
    pinCodeMessage: (
      <PinCodeMessage setForgetState={setForgetState} phone={phone} />
    ),
    pinCode: <PinCode setForgetState={setForgetState} phone={phone} setToken={setToken}/>,
    changePass: <ChangePassword setFormState={setFormState} token={token} />,
  }

  return renderer[forgetFormState]
}

export default ForgetPassword