import React, { FC, PropsWithChildren, useState } from 'react'
import { observer } from 'mobx-react-lite'
import { Paragraph, Text, Title } from 'components/Typography'
import { AuthStore } from 'stores/AuthStore'
import { Col, Row } from 'antd'
import styled from 'styled-components'
import { ActivationStore } from 'stores/ActivationStore'
import { Button } from 'components/Button'
import Icon from '@ant-design/icons'
import { ReactComponent as CaretLeft } from 'icons/caretLeft.svg'

const StyledTitle = styled(Title)`
  margin-bottom: 11px !important;

  ${props => props.theme.breakpoints.down('s')} {
	margin-bottom: 4px !important;
  }
`

const StyledParagraph = styled(Paragraph)`
  margin-bottom: 30px !important;

  ${props => props.theme.breakpoints.down('s')} {
	margin-bottom: 28px !important;
  }
`
const StyledRow = styled(Row)`
  margin-top: 147px;

  ${props => props.theme.breakpoints.down('s')} {
    justify-content: center;
    margin-top: 36px;
  }
`

const StyleButton = styled(Button)`
  width: 358px;

  ${props => props.theme.breakpoints.down('s')} {
	width: 150px;
  }
`
const StyledItem = styled.div`
  font-size: 16px;
  margin-bottom: 10px;
`
const StyledLabel = styled.div`
  font-weight: 700;
  margin-bottom: 4px;
  line-height: 18px
`
const StyledValue = styled(Paragraph)``
const ReviewItem: FC<PropsWithChildren<{ label: string }>> = ({ label, children }) => {
	return (
		<StyledItem>
			<StyledLabel>{label}</StyledLabel>
			<StyledValue>{children}</StyledValue>
		</StyledItem>
	)
}
export const Review: FC = observer(() => {
	const { userName, userInfo } = AuthStore.instance()
	const [store] = useState(ActivationStore.instance())
	const { testerInfo } = store

	return (
		<>
			<StyledTitle level={0}>Hello, <Text primary inherit>{userName}</Text></StyledTitle>
			<StyledParagraph style={{ marginBottom: 30 }}>Please review the tester’s information below.</StyledParagraph>
			<Row gutter={22}>
				<Col flex="none">
					<ReviewItem label="First Name">{testerInfo.firstName}</ReviewItem>
				</Col>
				<Col flex="none">
					<ReviewItem label="Last Name">{testerInfo.lastName}</ReviewItem>
				</Col>
			</Row>
			<ReviewItem label="Sex assigned at birth?">{testerInfo.gender === 'female' ? 'Female' : 'Male'}</ReviewItem>
			<ReviewItem label="Race">{testerInfo.race}</ReviewItem>
			<ReviewItem label="Ethnicity">{testerInfo.ethnicity}</ReviewItem>
			<ReviewItem label="Phone Number">{testerInfo.phone}</ReviewItem>
			<ReviewItem
				label="Address">{[testerInfo.address, testerInfo.address2, testerInfo.city + ', ' + testerInfo.ca, testerInfo.postal].filter(Boolean).map((text, index) => (
				<div key={index}>{text}</div>
			))}</ReviewItem>
			<ReviewItem label="Email(s) to be notified">
				<div>{testerInfo.email || userInfo?.email}</div>
				{(testerInfo.additionalEmails || []).map((e: string, index: number) => <div key={index}>{e}</div>)}
			</ReviewItem>
			<StyledRow align="middle" gutter={18} wrap={false} >
				<Col flex="none">
					<Button icon={<Icon component={CaretLeft} />} onClick={store.handlePrev.bind(store)} />
				</Col>
				<Col flex="none">
					<StyleButton onClick={store.handleNext.bind(store)}>Submit</StyleButton>
				</Col>
			</StyledRow>
		</>
	)
})
