import { useState } from 'react';
import { Link } from 'react-router-dom';
import MobileForm, { MobileFormData } from './mobile-form';
import SmsKey from './sms-key';
import RegisterForm from './register-form';
import { CheckSmsKeyRequestReturnType } from '../../api/temp-user';
import { useFormErrorMessage } from '../../hooks/index/use-form-error-message';
import Alert from '../shared/alert';

export type RegisterContentPropsType = {
  startStep?: number;
  defaultMobile?: string | null;
  defaultAuthKey?: string | null;
};

function RegisterContent({
  startStep = 0,
  defaultMobile = null,
  defaultAuthKey = null
}: RegisterContentPropsType) {
  const [step, setStep] = useState<number>(startStep);
  const [mobile, setMobile] = useState<string | null>(defaultMobile);
  const [authKey, setAuthKey] = useState<string | null>(defaultAuthKey);
  const { formErrorMessage: errorMessage, setFormError: setError } = useFormErrorMessage();

  if (errorMessage) return <Alert content={errorMessage} />;

  if (step === MOBILE || !mobile) {
    return (
      <>
        <MobileForm
          onSubmit={({ mobile }: MobileFormData) => {
            setMobile(mobile);
            setStep(SMS_KEY);
          }}
        />
        <p className='m-6 text-center'>
          <span className='font-medium text-red-500'>توجه: </span>
          <span> اگر هم اکنون به عنوان </span>
          <span className='font-medium'>داوطلب</span>
          <span> عضو سایت </span>
          <span className='font-medium'>فلش کارت‌های مدمشاور</span>
          <span> هستید نیاز به ثبت‌نام مجدد ندارید و با استفاده از دکمه </span>
          <Link to='/login' className='font-medium text-indigo-500'>
            ورود
          </Link>
          <span> وارد شوید و در غیر این صورت با استفاده از فرم بالا ثبت‌نام کنید.</span>
        </p>
      </>
    );
  }

  if (step === SMS_KEY || !authKey) {
    return (
      <SmsKey
        mobile={mobile}
        onSubmit={({ authKey }: CheckSmsKeyRequestReturnType) => {
          setAuthKey(authKey);
          setStep(REGISTER);
        }}
        onBack={() => setStep(MOBILE)}
        onError={error => {
          setError(error);
          setMobile(null);
          setStep(MOBILE);
        }}
      />
    );
  }

  if (step === REGISTER) {
    return (
      <RegisterForm
        mobile={mobile}
        authKey={authKey}
        reset={() => {
          setStep(MOBILE);
          setMobile(null);
          setAuthKey(null);
        }}
      />
    );
  }

  return null;
}

const [MOBILE, SMS_KEY, REGISTER] = [0, 1, 2];

export default RegisterContent;
