import { useState } from 'react';
import type { AuthType } from '../../types/authTypes';
import { ForgetPasswordInfo } from './ForgetPasswordInfo';
import { ForgetPasswordOtp } from './ForgetPasswordOtp';
import { ChangePassword } from './ChangePassword';
import type { CountryCode } from '@/types/commonTypes';
import { useNavigate } from 'react-router-dom';

export const ForgetPasswordContainer = () => {
  const navigate = useNavigate();
  const [forgetPassCurrentStep, setForgetPassCurrentStep] = useState<
    'enterInfo' | 'verifyOtp' | 'setPassword'
  >('enterInfo');
  const [forgetPasswordInfo, setForgetPasswordInfo] = useState<string>('');
  const [infoCountryCode, setInfoCountryCode] = useState<CountryCode>('+98');
  const [infoType, setInfoType] = useState<AuthType>('email');

  const handleVerifyOtp = () => {
    setForgetPassCurrentStep('verifyOtp');
  };

  const handleEditInfo = () => {
    setForgetPassCurrentStep('enterInfo');
  };

  const handleOtpVerified = () => {
    setForgetPassCurrentStep('setPassword');
  };

  const handlePasswordChanged = () => {
    navigate('/login');
  };

  return (
    <>
      {forgetPassCurrentStep === 'enterInfo' && (
        <ForgetPasswordInfo
          infoType={infoType}
          setInfoType={setInfoType}
          forgetPasswordInfo={forgetPasswordInfo}
          setForgetPasswordInfo={setForgetPasswordInfo}
          onVerifyOtp={handleVerifyOtp}
          countryCode={infoCountryCode}
          setCountryCode={setInfoCountryCode}
        />
      )}

      {forgetPassCurrentStep === 'verifyOtp' && (
        <ForgetPasswordOtp
          countryCode={infoCountryCode}
          infoType={infoType}
          onEditInfo={handleEditInfo}
          forgetPasswordInfo={forgetPasswordInfo}
          onOTPVerified={handleOtpVerified}
        />
      )}

      {forgetPassCurrentStep === 'setPassword' && (
        <ChangePassword
          onEditInfo={handleEditInfo}
          forgetPasswordInfo={forgetPasswordInfo}
          onPasswordChanged={handlePasswordChanged}
          infoType={infoType}
          countryCode={infoCountryCode}
        />
      )}
    </>
  );
};
