import React, { FC, useState } from 'react'
import { observer } from 'mobx-react-lite'
import { Paragraph, Text, Title } from 'components/Typography'
import { Col, Form, Row, Space } from 'antd'
import { Button } from 'components/Button'
import { AuthStore } from 'stores/AuthStore'
import { ErrorMessage, Input, Radio, RadioGroup, Checkbox } from 'components/FormControl'
import { RadioChangeEvent } from 'antd/es/radio/interface'
import styled from 'styled-components'
import { ReactComponent as CaretLeft } from 'icons/caretLeft.svg'
import Icon, { PlusOutlined, MinusOutlined } from '@ant-design/icons'
import { RaceSelect } from './RaceSelect'
import { EthnicitySelect } from './EthnicitySelect'
import { CountrySelect } from './CityCountrySelect'
import { data } from './caData'
import { ActivationStore } from 'stores/ActivationStore'
import { StyledSubmitButton } from './styled'

const StyledRadio = styled(Radio)`
  ${props => props.theme.breakpoints.down('s')} {
	.ant-radio-checked .ant-radio-inner::after {
	  background: ${props => props.theme.brandPrimary};
	}
  }
`

const StyledRadioDiv = styled.div`
  display: inline-block;
  padding: 0 20px;
  width: 122px;
`
const StyledTitle = styled(Title)`
  margin-bottom: 28px !important;

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

const StyledButtonWrapper = styled.div`
  text-align: center;
  margin-top: 80px;

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

const StyledFormTitle = styled(Title)`
  font-size: 36px;
  margin-bottom: 11px !important;

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

const StyledForm = styled(Form)`
  margin-top: 23px;

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

const StyledFormButtonWrapper = styled(Form.Item)`
  margin-top: 65px;

  ${props => props.theme.breakpoints.down('s')} {
	margin-top: 136px;

	.ant-row {
	  justify-content: center;
	}
  }
`

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

  ${props => props.theme.breakpoints.down('s')} {
	width: 150px;
  }
`

export const TesterInfo: FC = observer(() => {
	const [form] = Form.useForm()
	const firstName = Form.useWatch('firstName', form)
	const lastName = Form.useWatch('lastName', form)
	const { userName, userInfo } = AuthStore.instance()
	const [store] = useState(ActivationStore.instance())
	const [forMe, setForMe] = useState(1)
	const [innerStep, setInnerStep] = useState(0)
	const handleForMe = (e: RadioChangeEvent) => {
		setForMe(e.target.value)
	}
	const handleInnerNext = () => {
		setInnerStep(1)
	}
	const handleInnerPrev = () => {
		setInnerStep(0)
		form.resetFields()
	}
	const handleFinish = (values: any) => {
		console.log(values)
		// TODO: setup values
		store.setTesterInfo(values)
		store.handleNext()
	}
	return (
		<div>
			{innerStep === 0 ? (
				<>
					<StyledTitle level={2}>You have successfully verified your email address.</StyledTitle>
					<Paragraph style={{ marginBottom: 30 }}>Who will be taking the test?</Paragraph>
					<RadioGroup value={forMe} onChange={handleForMe}>
						<Space direction="vertical">
							<StyledRadio value={1}>I, {userName}, will take the
								test.</StyledRadio>
							<StyledRadio value={0}>This test is for someone else. </StyledRadio>
						</Space>
					</RadioGroup>
					<StyledButtonWrapper>
						<StyledSubmitButton onClick={handleInnerNext}>Next</StyledSubmitButton>
					</StyledButtonWrapper>
				</>
			) : (
				<>
					<StyledFormTitle>Hello, <Text primary inherit>{userName}</Text></StyledFormTitle>
					<Paragraph>Please provide information of <b>the person being tested</b>.</Paragraph>
					<StyledForm layout="vertical"
						onFinish={handleFinish} form={form}
						initialValues={{
							gender: 'female',
							firstName: userInfo?.firstName,
							lastName: userInfo?.lastName,
							additionalEmails: [""],
							ca: data[0]
						}}>
						<Row gutter={12}>
							<Col span={12}>
								<Form.Item label="First Name" name="firstName"
									rules={[
										{
											required: true, message: <ErrorMessage message="Please input your first name" />
										},
									]}>
									<Input readOnly={Boolean(forMe)} />
								</Form.Item>
							</Col>
							<Col span={12}>
								<Form.Item name="lastName" label="Last Name" rules={[
									{
										required: true, message: <ErrorMessage message="Please input your last name" />
									},
								]}>
									<Input />
								</Form.Item>
							</Col>
						</Row>
						<Form.Item name="gender" label={<div>
							<Paragraph>Sex assigned at birth?</Paragraph>
							<Paragraph italic style={{ fontWeight: 400, fontFamily: 'Roboto' }}>
								We need to know your sex at birth as the lab requires this information to provide the correct reference
								range for your results.</Paragraph>
						</div>}
							rules={[
								{
									required: true, message: <ErrorMessage message="Please select your gender" />
								},
							]}
						>
							<RadioGroup>
								<Radio value="female"><StyledRadioDiv>Female</StyledRadioDiv></Radio>
								<Radio value="male"><StyledRadioDiv>Male</StyledRadioDiv></Radio>
							</RadioGroup>
						</Form.Item>
						<Form.Item label="Race" name="race" rules={[
							{
								required: true, message: <ErrorMessage message="Please select your race" />
							},
						]}>
							<RaceSelect />
						</Form.Item>
						<Form.Item label="Ethnicity" name="ethnicity"
							rules={[
								{
									required: true, message: <ErrorMessage message="Please input your ethnicity" />
								},
							]}
						>
							<EthnicitySelect />
						</Form.Item>
						<Form.Item label="Phone Number" name="phone"
							rules={[
								{
									required: true, message: <ErrorMessage message="Please input your phone number" />
								},
							]}
						>
							<Input placeholder="(xxx) - xxx - xxxx" />
						</Form.Item>
						<Form.Item label="Address" name="address" rules={[
							{
								required: true, message: <ErrorMessage message="Please input your address" />
							},
						]}>
							<Input />
						</Form.Item>
						<Form.Item label="Address line2" name="address2"><Input /></Form.Item>
						<Row gutter={22}>
							<Col flex="auto">
								<Form.Item label="City" name="city" rules={[
									{
										required: true, message: <ErrorMessage message="Please input your city" />
									},
								]}>
									<Input />
								</Form.Item>
							</Col>
							<Col flex="none">
								<Form.Item name="ca" label=" ">
									<CountrySelect />
								</Form.Item>
							</Col>
						</Row>
						<Form.Item label="Postal / Zip Code" name="postal" rules={[
							{
								required: true, message: <ErrorMessage message="Please input your postal/zip code" />
							},
						]}><Input /></Form.Item>
						<Form.List name="additionalEmails">
							{(fields, { add, remove }, { errors }) => (
								<>
									{fields.map((field, index) => (
										<Row gutter={22} align="bottom" wrap={false}>
											<Col flex="auto">
												<Form.Item {...field}
													rules={[
														{ type: 'email', message: <ErrorMessage message="Invalid email" /> },
													]}
													label={index === 0 ? "Send results notifications to additional emails. (Optional)" : ""}
													key={field.key}>
													<Input />
												</Form.Item>
											</Col>
											<Col flex="none">
												<Form.Item label={index === 0 ? " " : ""}>
													{index === fields.length - 1 &&
														<Button
															onClick={() => add()}
															icon={<PlusOutlined />}
														/>}
													{index < fields.length - 1 &&
														<Button
															onClick={() => remove(index)}
															icon={<MinusOutlined />}
														/>}
												</Form.Item>
											</Col>
										</Row>
									))}
									<Form.ErrorList errors={errors} />
								</>
							)}
						</Form.List>
						{!forMe &&
							<Form.Item name="checked" valuePropName="checked" rules={[{
								required: true,
								validateTrigger: 'onSubmit',
								transform: value => value ? 'y' : '',
								message: <ErrorMessage message="Please accept agreement" />
							}]}>
								<Checkbox>
									By checking this box, I indicate that I {userName}, have
									obtained {firstName || lastName ? [firstName, lastName].filter(Boolean).join(' ') : '[Tester\'s Name]'}'s
									consent
									to assist him/her in the sample collection process and fill out any necessary forms on his/her behalf.
								</Checkbox>
							</Form.Item>
						}
						<StyledFormButtonWrapper>
							<Row align="middle" gutter={18} wrap={false}>
								<Col flex="none">
									<Button icon={<Icon component={CaretLeft} />} onClick={handleInnerPrev} />
								</Col>
								<Col flex="none">
									<StyleFormButton htmlType="submit">Next</StyleFormButton>
								</Col>
							</Row>
						</StyledFormButtonWrapper>
					</StyledForm>
				</>
			)}

		</div>
	)
})
