import React from 'react';
import { UseFormMethods } from 'react-hook-form';
import { useStepMachine } from 'ui/step-machine';
import { ClipLoader } from 'react-spinners';
import { AuthError, Values } from './types';
import machine, { Step } from './stepMachine';
import Confirm from './Pages/Confirm';
import Change from './Pages/Change';
import Reset from './Pages/Reset';

interface Props {
  formProps: UseFormMethods<Values>;
  onForgotPassword: (email: string) => Promise<any>;
  onForgotPasswordSubmit: (values: any) => Promise<unknown>;
  error?: AuthError;
  submitError?: AuthError;
  submitting: boolean;
}

const Recovery = ({
  formProps: { errors, control, handleSubmit },
  onForgotPassword,
  onForgotPasswordSubmit,
  error,
  submitError,
  submitting,
}: Props) => {
  const { step, next, previous, handleSubmitStep } = useStepMachine(machine, {
    onSubit: onForgotPasswordSubmit,
  });
  return (
    <form
      noValidate
      onSubmit={handleSubmit(async (data) => {
        if (step === Step.RESET) {
          const { error } = await onForgotPassword(data.emailAddress);
          if (!error) {
            handleSubmitStep(data);
          }
          return null;
        }
        return handleSubmitStep(data);
      })}
    >
      <Choose>
        <When condition={step === Step.RESET}>
          <Reset
            error={error}
            errors={errors}
            control={control}
            submitting={submitting}
          />
        </When>
        <When condition={step === Step.CONFIRM}>
          <Confirm errors={errors} control={control} onPrevious={previous} />
        </When>
        <When condition={step === Step.CHANGE}>
          <Change
            error={submitError}
            onForgotPasswordSubmit={onForgotPasswordSubmit}
            submitting={submitting}
            errors={errors}
            control={control}
            onNext={next}
            onPrevious={previous}
          />
        </When>
        <When condition={step === Step.SUBMIT}>
          <ClipLoader />
        </When>
      </Choose>
    </form>
  );
};

export default Recovery;