import React from 'react'

import Step0 from './SignUpStep0'
import Step1 from './SignUpStep1'
import { FormItems } from '../UIComponents'

const { RootContainer, Title, Subtitle, Email, Err } = FormItems

const defaultSubtitle = `Your details have been pre-filled, please review and confirm before set
your password.`

const SignUpInvitation = ({
  step,
  error,
  journal,
  onSubmit,
  nextStep,
  prevStep,
  initialValues,
  type,
  subtitle = defaultSubtitle,
  title = 'Add New Account Details',
}) => (
  <RootContainer bordered>
    <Title>{title}</Title>
    <Subtitle>{subtitle}</Subtitle>
    <Email>{initialValues.email}</Email>
    {error && <Err>Token expired or Something went wrong.</Err>}
    {step === 0 && (
      <Step0
        error={error}
        initialValues={initialValues}
        journal={journal}
        onSubmit={nextStep}
      />
    )}
    {step === 1 && (
      <Step1
        error={error}
        initialValues={initialValues}
        journal={journal}
        onSubmit={onSubmit}
        prevStep={prevStep}
        type={type}
      />
    )}
  </RootContainer>
)

export default SignUpInvitation