import React, { useState, type JSX } from 'react';
import { LoginRegisterForm } from './LoginRegiserForm';
import type { AuthMode, AuthType } from '../types/auth-types';
import { OtpVerifyForm } from './OtpVerifyForm';

export const AuthenticationContainer = (): JSX.Element => {
  const [authMode, setAuthMode] = useState<AuthMode>('register');
  const [authType, setAuthType] = useState<AuthType>('phone');
  const [currentStep, setCurrentStep] = useState<
    'emailOrPassword' | 'verify' | 'enterPassword'
  >('verify');
  const [loginRegisterValue, setLoginRegisterValue] =
    useState<string>('9152814093');

  const handleLoginRegister = (value: string) => {
    setLoginRegisterValue(value);
    setCurrentStep('verify');
  };

  const handleEditValue = () => {
    setCurrentStep('emailOrPassword');
  };

  return (
    <>
      {currentStep === 'emailOrPassword' && (
        <LoginRegisterForm
          loginRegisterValue={loginRegisterValue}
          setLoginRegisterValue={setLoginRegisterValue}
          authType={authType}
          setAuthType={setAuthType}
          onLoginRegisterSubmit={handleLoginRegister}
        />
      )}

      {currentStep === 'verify' && (
        <OtpVerifyForm
          onEditValue={handleEditValue}
          authMode={authMode}
          authType={authType}
          value={loginRegisterValue}
        />
      )}
    </>
  );
};