import React from 'react';
import { Wizard } from './Wizard';
import { Step1 } from './StepOneForm';
import { Step2 } from './StepTwoForm';
import { Step3 } from './StepThreeForm';
import { Step4 } from './StepFourForm';

/* eslint-disable react/jsx-key */
export const SyncWizard: React.FunctionComponent<{
  onFinish: (data: any) => void;
}> = ({ onFinish }) => {
  return (
    <Wizard onFinish={onFinish}>
      {register => {
        return [
          <Step1.Form {...register({ key: Step1.KEY, title: Step1.TITLE })} />,
          <Step2.Form {...register({ key: Step2.KEY, title: Step2.TITLE })} />,
          <Step3.Form {...register({ key: Step3.KEY, title: Step3.TITLE })} />,
          <Step4.Form {...register({ key: Step4.KEY, title: Step4.TITLE })} />
        ];
      }}
    </Wizard>
  );
};