import React, { useState, type JSX } from 'react';
import { LoginRegisterForm } from './LoginRegiserForm';
import type { AuthMode, AuthType } from '../../types/authTypes';
import { OtpVerifyForm } from './OtpVerifyForm';
import { isNumeric } from '@/utils/regexes/isNumeric';
import { CompleteSignUp } from './CompleteSignUp';
import { EnterPasswordForm } from './EnterPasswordForm';
import { getUserStatusByPhoneNumberOrEmail } from '../../api/authorizationAPI';
import { UserStatus } from '../../types/userTypes';
import type { CountryCode } from '@/types/commonTypes';
import { VerifyPhoneNumber } from './VerifyPhoneNumber';

export const AuthenticationSteps = (): JSX.Element => {
  const [authMode, setAuthMode] = useState<AuthMode>('register');
  const [authType, setAuthType] = useState<AuthType>('phone');
  const [currentStep, setCurrentStep] = useState<
    | 'emailOrPhone'
    | 'verify'
    | 'enterPassword'
    | 'addPhoneNumber'
    | 'addedPhoneNumberVerify'
  >('emailOrPhone');
  const [loginRegisterValue, setLoginRegisterValue] = useState<string>('');
  const [countryCode, setCountryCode] = useState<CountryCode>('+98');
  const [addedPhoneNumberValue, setAddedPhoneNumberValue] =
    useState<string>('');

  const handleLoginRegister = (value: string, userStatus: UserStatus) => {
    setAuthType(isNumeric(value) ? 'phone' : 'email');

    switch (userStatus) {
      case UserStatus.NotRegistered:
        setAuthMode('register');
        setCurrentStep('verify');
        break;

      case UserStatus.RegisteredWithoutPassword:
        setAuthMode('login');
        setCurrentStep('verify');

        break;

      case UserStatus.RegisteredWithPassword:
        setAuthMode('login');
        setCurrentStep('enterPassword');

        break;
    }
  };

  const handleOTPVerfied = (registeredWithoutPhoneNumber: boolean = false) => {
    // if (registeredWithoutPhoneNumber) {
    //   setCurrentStep('addPhoneNumber');
    // }
  };

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

  const handleCompleteSignUp = (countryCode: string, value: string) => {
    setCurrentStep('addedPhoneNumberVerify');
  };

  const handleCompleteSignUpOTPVerified = () => {
    console.log('phoneNumberVerified');
  };

  const handleCompleteSignUpEditValue = () => {
    setCurrentStep('emailOrPhone');
  };

  const handleLoggedInWithPassowrd = () => {};

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

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

      {currentStep === 'enterPassword' && (
        <EnterPasswordForm
          onLoggedIn={handleLoggedInWithPassowrd}
          onEditValue={handleEditValue}
          onLoginWithOTP={() => setCurrentStep('verify')}
          emailOrPhone={loginRegisterValue}
        />
      )}

      {currentStep === 'addPhoneNumber' && (
        <CompleteSignUp
          value={addedPhoneNumberValue}
          setValue={setAddedPhoneNumberValue}
          email={loginRegisterValue}
          onCompleteSignUp={handleCompleteSignUp}
        />
      )}

      {currentStep === 'addedPhoneNumberVerify' && (
        <VerifyPhoneNumber
          countryCode={countryCode}
          onEditValue={handleCompleteSignUpEditValue}
          value={addedPhoneNumberValue}
          onPhoneNumberVerified={handleCompleteSignUpOTPVerified}
        />
      )}
    </>
  );
};