import React, { FC } from 'react'
import {
	StyledContainer, StyledMain, StyledParagraph, StyledStepItemContainer, StyledSteps,
} from './styled'
import { observer } from 'mobx-react-lite'
import { ActivationStore } from 'stores/ActivationStore'
import { Account } from './Account'
import { TesterInfo } from './TesterInfo'
import { Done } from './Done'
import { Review } from './Review'

export const Creation: FC = observer(() => {
	const { code, step, stepItems } = ActivationStore.instance()
	return (
		<StyledContainer>
			<StyledMain>
				<StyledSteps
					current={step}
					barStyle={{ marginBottom: 22 }}
					items={stepItems} />
				<StyledStepItemContainer>
					{step !== 3 ?
						<StyledParagraph>You are activating your iHealth CheckMeSafe Home Collection Kit Critical 2 (HIV &
							Syphilis),
							ID {code}</StyledParagraph> : null}
					{step === 0 ? <Account /> : null}
					{step === 1 ? <TesterInfo /> : null}
					{step === 2 ? <Review /> : null}
					{step === 3 ? <Done /> : null}
				</StyledStepItemContainer>
			</StyledMain>
		</StyledContainer>
	)
})
