import React, {useState} from 'react';
import Modal from '../../components/Modal';
import { Environment } from 'rm-sdk/build/types';
import { Web3Provider } from '@ethersproject/providers';
import  { WizardStep } from './wizardStep';
import { WizardStepType } from './wizardStepType';
import { ApproveToken } from './approveToken';
import { ApproveMarketToken } from './approveMarketToken';
import { NumericValueSubmit } from './numericValueSubmit';
import { StepLine } from './stepLine';
import { ActivateMarketProtection } from './activateMarketProtection';
import { SuccessIcon } from '../../components/SuccessIcon';

interface IProps {
  provider: Web3Provider;
  environment: Environment | string;
  onClose: (isDone: boolean) => void;
  stepList: WizardStep[];
  title: string;
}

export function RMWizard(props: IProps) {
  const [step, setStep] = useState(1);
  const [isDone, setDone] = useState(false);

  const stepCount = props.stepList?.length ?? 0;

  function closePopUp(e: any) {
    if (e.target === e.currentTarget) {
      props.onClose(false);
    }
  }

  function handleStepFinished(success: boolean) {
    if (success) {
      setTimeout(() => {
        if (step === stepCount) {
          props.onClose(true);
          return;
        }

        setStep(step + 1);
        setDone(false);
      }, 1000);

      setDone(true);
    }
  }

  function renderStep(step: WizardStep) {
    const {params} = step;

    switch(step.type) {
      case WizardStepType.ApproveToken:
        return <ApproveToken
          provider={props.provider}
          environment={props.environment}
          onFinish={handleStepFinished}

          {...params}
        />;

      case WizardStepType.NumericValueSubmit:
        return <NumericValueSubmit
          onFinish={handleStepFinished}

          {...params}
        />

      case WizardStepType.ApproveMarketToken:
        return <ApproveMarketToken
          provider={props.provider}
          environment={props.environment}
          onFinish={handleStepFinished}

          {...params}
        />;

        case WizardStepType.ActivateMarketProtection:
          return <ActivateMarketProtection
            provider={props.provider}
            environment={props.environment}
            onFinish={handleStepFinished}

            {...params}
          />;
    }
  }

  return <>
    <Modal isOpen={true}
      onBackgroundClick={closePopUp}
      onCloseClick={closePopUp}
      onEscPressed={closePopUp}
      width='auto'
      height='auto'>
        <div className={'wizard'}>
          <h1>{props.title}</h1>
          <StepLine currentStep={step} stepCount={stepCount} stepName={props.stepList[step - 1].description} />
          <div className={`wizard-content ${
            isDone ?
            step !== stepCount ? 'slide-out' : '' :
            step !== 1 ? 'slide-in' : ''}`}>
            {
              isDone ? <div className='step-is-done'><SuccessIcon scale={5} /></div>
              : renderStep(props.stepList[step - 1])
            }
          </div>
        </div>
    </Modal>
  </>;
}
