import { createWizardFlow, useWizardFlow } from 'react-wizard-flow';

enum TestSteps {
  step1,
  step2,
}

const WizardFlow = createWizardFlow(TestSteps);

function Step1() {
  const { transition, close } = useWizardFlow(WizardFlow);
  return (
    <div>
      <header>Step 1</header>
      <button onClick={() => transition(TestSteps.step1)}>To Step 1</button>
      <button onClick={() => transition(TestSteps.step2)}>To Step 2</button>
      <button onClick={close}>Close</button>
    </div>
  );
}

function Step2() {
  const { transition, close } = useWizardFlow(WizardFlow);
  return (
    <div>
      <header>Step 1</header>
      <button onClick={() => transition(TestSteps.step1)}>To Step 1</button>
      <button onClick={() => transition(TestSteps.step2)}>To Step 2</button>
      <button onClick={close}>Close</button>
    </div>
  );
}

const STEPS = {
  [TestSteps.step1]: <Step1 />,
  [TestSteps.step2]: <Step2 />,
};

export default function() {
  const onClose = () => { console.log('Flow closed'); }
  return <WizardFlow.Provider initialStep={TestSteps.step1} steps={STEPS} onClose={onClose} />
}