ForgetPasswordForm

'use client';

import { useGetAllowedStatesQuery } from '@/features/front-end/settings/settingsApi';
import { CountryCode, isValidPhoneNumber } from 'libphonenumber-js';
import Link from 'next/link';
import { useRouter } from 'next/navigation';
import { useState } from 'react';
import { HiOutlineArrowSmLeft } from 'react-icons/hi';
import { PiSpinnerLight } from 'react-icons/pi';
import { useDispatch } from 'react-redux';
import { Button, Step, Stepper } from 'rizzui';
import { PhoneNumber } from './PhoneNumber';

export default function ForgetPasswordForm() {
  const { replace } = useRouter();
  const dispatch = useDispatch();
  const [phone, setPhone] = useState('');
  const [password, setPassword] = useState('');
  const [country, setCountry] = useState('');
  const [countryCode, setCountryCode] = useState<any>('');
  const [dialCode, setDialCode] = useState('');
  const [submitting, setSubmitting] = useState(false);
  const [phoneValidMsg, setPhoneValidMsg] = useState('');
  const [passwordValidMsg, setPasswordValidMsg] = useState('');

  const [currentTab, setCurrentTab] = useState(0);
  const [currentStep, setCurrentStep] = useState(0);

  const tabs = ['Forget Password', 'Verify Otp', 'Change Password'];

  const handleTabChange = (tab: number) => {
    setCurrentTab(tab);
  };

  const { data: allowedCountries, isLoading } =
    useGetAllowedStatesQuery(undefined);

  // Submit Handler
  const submitHandler = (e: React.FormEvent) => {
    e.preventDefault();
    setSubmitting(true);
    setPhoneValidMsg('');
    setPasswordValidMsg('');

    if (
      !phone ||
      !country ||
      phone.length <= dialCode.length ||
      !isValidPhoneNumber(phone.replace(dialCode, ''), countryCode)
    ) {
      setSubmitting(false);
      setPhoneValidMsg('Valid phone number is required!');
      return;
    }
  };

  return (
    <section className="flex min-h-screen flex-col items-center justify-center bg-[#061626] text-white">
      <div className="w-[500px] text-white">
        <Stepper currentIndex={currentStep} className="w-full">
          <Step
            title={<span className="text-white">Step 1</span>}
            color="primary"
          />
          <Step
            title={<span className="text-white">Step 2</span>}
            color="primary"
          />
          <Step
            title={<span className="text-white">Step 3</span>}
            color="primary"
          />
        </Stepper>

        <div className="mt-7 flex space-x-4">
          <Button
            disabled={currentStep === 3}
            onClick={() => {
              setCurrentStep(currentStep + 1);
              setCurrentTab(currentTab + 1);
            }}
          >
            Next
          </Button>

          {currentStep === 3 && (
            <Button onClick={() => {
              setCurrentStep(0)
              setCurrentTab(0); 
            }}>Reset</Button>
          )}
        </div>
      </div>
      <div className="card w-[500px] bg-[#1C2632] shadow-xl">
        <div className={`card-body ${currentTab === 0 ? '' : 'hidden'}`}>
          <h2 className="mb-5 text-center text-xl font-semibold">
            Forgot Password?
          </h2>

          <form onSubmit={submitHandler}>
            {isLoading ? (
              <div>
                <div className="mb-2 h-6 w-full max-w-36 animate-pulse rounded-md bg-[#061626]"></div>
                <div className="h-12 w-full animate-pulse rounded bg-[#061626]"></div>
              </div>
            ) : (
              <div>
                <PhoneNumber
                  label="Phone Number"
                  size="lg"
                  country={allowedCountries?.data[0]}
                  onlyCountries={allowedCountries?.data}
                  dropdownClassName="text-black"
                  requiredStar={true}
                  labelClassName="text-base"
                  color="primary"
                  variant="outline"
                  onChange={(
                    phone,
                    country: {
                      name: string;
                      countryCode: CountryCode;
                      dialCode: string;
                    }
                  ) => {
                    setPhoneValidMsg('');
                    setPhone(phone);
                    setCountry(country?.name);
                    setCountryCode(country?.countryCode.toUpperCase());
                    setDialCode(country?.dialCode);
                  }}
                  value={phone}
                />
                {phoneValidMsg && (
                  <p className="mt-1 select-none px-1 font-medium text-error">
                    {phoneValidMsg}
                  </p>
                )}
              </div>
            )}

            <div className="card-actions mt-5 justify-end">
              <button
                type="submit"
                className="btn btn-primary w-full"
                disabled={submitting}
              >
                Next
                {submitting && (
                  <PiSpinnerLight className="animate-spin text-base" />
                )}
              </button>
            </div>
          </form>
          <div className="mt-5 flex select-none items-center justify-center">
            <Link
              href="/"
              className="flex items-center transition-all duration-150 ease-in hover:text-primary"
            >
              <HiOutlineArrowSmLeft className="mr-3 text-xl" /> Go to Home
            </Link>
          </div>
        </div>

        <div className={`card-body ${currentTab === 1 ? '' : 'hidden'}`}>
          <h2 className="mb-5 text-center text-xl font-semibold">Verify OTP</h2>

          <form onSubmit={submitHandler}>
            {isLoading ? (
              <div>
                <div className="mb-2 h-6 w-full max-w-36 animate-pulse rounded-md bg-[#061626]"></div>
                <div className="h-12 w-full animate-pulse rounded bg-[#061626]"></div>
              </div>
            ) : (
              <div>
                <PhoneNumber
                  label="Phone Number"
                  size="lg"
                  country={allowedCountries?.data[0]}
                  onlyCountries={allowedCountries?.data}
                  dropdownClassName="text-black"
                  requiredStar={true}
                  labelClassName="text-base"
                  color="primary"
                  variant="outline"
                  onChange={(
                    phone,
                    country: {
                      name: string;
                      countryCode: CountryCode;
                      dialCode: string;
                    }
                  ) => {
                    setPhoneValidMsg('');
                    setPhone(phone);
                    setCountry(country?.name);
                    setCountryCode(country?.countryCode.toUpperCase());
                    setDialCode(country?.dialCode);
                  }}
                  value={phone}
                />
                {phoneValidMsg && (
                  <p className="mt-1 select-none px-1 font-medium text-error">
                    {phoneValidMsg}
                  </p>
                )}
              </div>
            )}

            <div className="card-actions mt-5 justify-end">
              <button
                type="submit"
                className="btn btn-primary w-full"
                disabled={submitting}
              >
                Next
                {submitting && (
                  <PiSpinnerLight className="animate-spin text-base" />
                )}
              </button>
            </div>
          </form>
          <div className="mt-5 flex select-none items-center justify-center">
            <Link
              href="/"
              className="flex items-center transition-all duration-150 ease-in hover:text-primary"
            >
              <HiOutlineArrowSmLeft className="mr-3 text-xl" /> Go to Home
            </Link>
          </div>
        </div>

        <div className={`card-body ${currentTab === 2 ? '' : 'hidden'}`}>
          <h2 className="mb-5 text-center text-xl font-semibold">
            Change Password
          </h2>

          <form onSubmit={submitHandler}>
            {isLoading ? (
              <div>
                <div className="mb-2 h-6 w-full max-w-36 animate-pulse rounded-md bg-[#061626]"></div>
                <div className="h-12 w-full animate-pulse rounded bg-[#061626]"></div>
              </div>
            ) : (
              <div>
                <PhoneNumber
                  label="Phone Number"
                  size="lg"
                  country={allowedCountries?.data[0]}
                  onlyCountries={allowedCountries?.data}
                  dropdownClassName="text-black"
                  requiredStar={true}
                  labelClassName="text-base"
                  color="primary"
                  variant="outline"
                  onChange={(
                    phone,
                    country: {
                      name: string;
                      countryCode: CountryCode;
                      dialCode: string;
                    }
                  ) => {
                    setPhoneValidMsg('');
                    setPhone(phone);
                    setCountry(country?.name);
                    setCountryCode(country?.countryCode.toUpperCase());
                    setDialCode(country?.dialCode);
                  }}
                  value={phone}
                />
                {phoneValidMsg && (
                  <p className="mt-1 select-none px-1 font-medium text-error">
                    {phoneValidMsg}
                  </p>
                )}
              </div>
            )}

            <div className="card-actions mt-5 justify-end">
              <button
                type="submit"
                className="btn btn-primary w-full"
                disabled={submitting}
              >
                Next
                {submitting && (
                  <PiSpinnerLight className="animate-spin text-base" />
                )}
              </button>
            </div>
          </form>
          <div className="mt-5 flex select-none items-center justify-center">
            <Link
              href="/"
              className="flex items-center transition-all duration-150 ease-in hover:text-primary"
            >
              <HiOutlineArrowSmLeft className="mr-3 text-xl" /> Go to Home
            </Link>
          </div>
        </div>
      </div>
    </section>
  );
}