import React, { FC, useState } from 'react'
import { observer } from 'mobx-react-lite'
import { Link, Text, Title } from 'components/Typography'
import { ActivationStore } from 'stores/ActivationStore'
import styled from 'styled-components'
import { ReactComponent as SuccessSvg } from './images/success.svg'
import { Paths, ExternalPaths } from '../../../../../routes/Paths'

const StyledLinkItem = styled.div`
  margin-bottom: 6px;

  &:first-child {
	margin-top: 12px;
  }
`

const StyledImageWrapper = styled.div`
  position: relative;
  height: 231px;
  text-align: center;

  ${props => props.theme.breakpoints.up('s')} {
	height: 316px;
	text-align: left;
	padding-left: 103px;
  }

  > svg {
	width: 223px;
	height: 231px;

	${props => props.theme.breakpoints.up('s')} {
	  width: 301px;
	  height: 385px;
	  position: absolute;
	  top: -15px;
	}
  }
`
const StyledTitle = styled(Title)`
  margin-bottom: 7px !important;

  ${props => props.theme.breakpoints.down('s')} {
	margin-bottom: 4px !important;
  }
`
export const Done: FC = observer(() => {
	const [store] = useState(ActivationStore.instance())
	const { code } = store
	return (
		<>
			<StyledTitle level={0}>Your kit is <Text primary inherit>activated!</Text></StyledTitle>
			<Title level={2}>You have just activated your iHealth CheckmeSafe Home Collection Kit Critical 2 - HIV & Syphilis
				ID {code}</Title>
			<StyledImageWrapper>
				<SuccessSvg />
			</StyledImageWrapper>
			<Title level={2}>What’s Next?</Title>
			<div>
				<StyledLinkItem>
					<Link href={ExternalPaths.GuideVideo} target="_blank" rel="noopener noreferrer">Watch a video on how to
						collect your sample</Link>
				</StyledLinkItem>
				<StyledLinkItem>
					<Link href={Paths.Dashboard}>Go to my dashboard</Link>
				</StyledLinkItem>
				<StyledLinkItem>
					<Link href={ExternalPaths.Faqs} target="_blank" rel="noopener noreferrer">View FAQs</Link>
				</StyledLinkItem>
			</div>
		</>
	)
})
