import React, { FC } from 'react'
import styled from 'styled-components'
import { Paragraph } from 'components/Typography'
import { Steps } from 'components/Steps'
import { ExternalPaths } from 'routes/Paths'
import { ReactComponent as BoxSvg } from '../images/box.svg'
import { useBreakpoint } from 'components/Breakpoint'

const StyledCard = styled.div`
  background: #FFFFFF;
  box-shadow: 2px 1px 4px 1px rgba(0, 0, 0, 0.1);
  border-radius: 7px;
  padding: 18px 13px;
  margin-bottom: 31px;

  ${props => props.theme.breakpoints.down('s')} {
	padding: 17px 0;
  }
`

const StyledTitle = styled(Paragraph)`
  padding: 0 15px 12px;
`
const StyledVideo = styled.video`
  width: 100%;
  height: 163px;
  margin-top: 12px;
  margin-bottom: 8px;
  background: #000000;

  ${props => props.theme.breakpoints.up('s')} {
	margin-bottom: 15px;
  }
`
const StyledVideoInfo = styled(Paragraph)`
  font-size: 14px;
  text-align: center;
`

const StyledStep2Content = styled.div`
  padding: 13px 28px 24px 18px;


  ${props => props.theme.breakpoints.down('s')} {
	height: 153px;
	padding: 0 28px 0 18px;
	display: flex;
	flex-direction: column;
  }

`

const StyledStep2SvgWrapper = styled.div`
  display: flex;
  align-items: center;
  justify-content: center;

  ${props => props.theme.breakpoints.down('s')} {
    flex: auto;
  }

  ${props => props.theme.breakpoints.up('s')} {
    height: 52px;
    flex: 0 0 52px;
    padding-bottom: 16px;
  }
`

const StyledStep2Info = styled.div`
  flex: 0 0 auto;
`

export interface InProgressResultItemProps {
	step: number
	error?: boolean
}

export const InProgressItem: FC<InProgressResultItemProps> = ({ step, error }) => {
	const isSmallScreen = useBreakpoint({ s: true, down: true })
	return (
		<StyledCard>
			<StyledTitle>Critical 2 (Kit ID: xxxxxx)</StyledTitle>
			<Steps
				current={step}
				showBar
				barStyle={{ marginTop: 12 }}
				items={[{
					title: 'Activated'
				}, {
					title: 'Sample Received'
				}, {
					title: 'Results'
				}]}
			/>
			{step === 0 ? (
				<>
					<StyledVideo controls src={ExternalPaths.GuideVideo} />
					<StyledVideoInfo>Watch video on how to collect your sample</StyledVideoInfo>
				</>
			) : null}
			{step === 1 ? (
				<StyledStep2Content>
					<StyledStep2SvgWrapper>
						<BoxSvg />
					</StyledStep2SvgWrapper>
					{error ? (
						<StyledStep2Info>
							<Paragraph primary strong level={2}>ACTION REQUIRED</Paragraph>
							<Paragraph level={isSmallScreen ? 2 : 1}>
								There was a problem processing your sample. Please check your email for the details and instructions on
								how to proceed with the next step.</Paragraph>
						</StyledStep2Info>) : (
						<StyledStep2Info>
							<Paragraph>We are analyzing your sample, the result will be ready soon.</Paragraph>
							<Paragraph italic>We will contact you if there are problems processing
								your sample.</Paragraph>
						</StyledStep2Info>
					)}
				</StyledStep2Content>
			) : null}
		</StyledCard>
	)
}
