const routes: any[] = [
  {
    path: 'account',
    component: <AccountStep />,
    requiredFields: ['email', 'first_name', 'last_name', 'password']
  },
  {
    path: 'profile',
    component: <ProfileStep />,
    requiredFields: ['user.occupation']
  },
  {
    path: 'preferences',
    component: <TenantPreferencesStep />
  }
]

class SampleComponent extends Component {
   private cachedPage = Number(localStorage.getItem('tenant_registration_page'))

  public state = {
    page: this.cachedPage || 0,
    loading: false,
    errors: []
  }

  private onNext = async (
    page: number,
    values: TenantRegistrationFormValues
  ) => {
    if (page === 1) {
      this.checkForEmail(get(values, 'email'), () => this.goToPage(page))
    } else {
      this.goToPage(page)
    }
  }

  private checkForEmail = async (identity: string, callback: () => void) => {
    this.setState({ loading: true, errors: [] })
    try {
      const { exists = false } = await api.get('identities', {
        params: {
          identity
        }
      })
      if (!exists) {
        this.setState(
          {
            loading: false
          },
          callback
        )
      } else {
        this.setState({
          errors: ['This email has been taken']
        })
      }
    } catch (_) {
      this.setState({
        errors: ['This email has been taken']
      })
    } finally {
      this.setState({ loading: false })
    }
  }

  private goToPage = (page: number) => {
    this.setState(
      {
        page
      },
      () => {
        localStorage.setItem('tenant_registration_page', String(page))
      }
    )
  }

 public render() {
    const { page, loading, errors } = this.state
    return (
      <MultiStep
        title="Tenant Registration"
        persisted
        steps={routes}
        page={page}
        PageComponent={RegistrationPage}
        onChangePage={this.onNext}
        validationSchema={commonRegistrationSchema}
        initialValues={tenantInitialValues}
        loading={loading}
        errors={errors}
        path="/tenants/sign_up"
        onSubmit={console.log}
      />
    )
  }
}