import React, { FC, useState } from 'react'
import {
	StyledContainer,
	StyledImageWrapper,
	StyledMainContent,
	StyledHeadline,
	StyledContent,
	StyledButton,
	StyledParagraph, StyledHint, StyledFormContent,
} from './styled'
import { Form } from 'antd'
import { Paragraph, Link, Text } from '../../../components/Typography'
import { Input, ErrorMessage } from '../../../components/FormControl'
import { ActivateGuide } from './ActivateGuide'

export const Activate: FC = () => {
	const [logined] = useState(true)
	const [showModal, setModal] = useState(false)
	const handleShowModal = () => {
		setModal(true)
	}

	const handleCloseModal = () => {
		setModal(false)
	}
	const onFinish = (values: any) => {
		// TODO: login
		console.log('Success:', values);
	};
	return (
		<StyledContainer>
			<StyledImageWrapper />
			<StyledMainContent>
				<StyledContent>
					{logined ? (
						<StyledHeadline level={1} $login={logined}>
							Hello, <Text inherit primary>John</Text>
							<br />
							Welcome to your kit activation.
						</StyledHeadline>
					) : (
						<StyledHeadline level={1} $login={logined}>
							Welcome to your kit <Text inherit primary>activation</Text>.
						</StyledHeadline>
					)}
					<StyledParagraph>Your kit needs to be activated before the lab can process your sample.</StyledParagraph>
					<StyledFormContent>
						<Form
							layout="vertical"
							onFinish={onFinish}
						>
							<Form.Item
								label="Activation Code"
								name="code"
								rules={[
									{
										required: true, message: <ErrorMessage message="Please input your activation code" />
									},
									// Activation code not found
								]}
							>
								<Input placeholder="xxxx-xxxx-xxxx" />
							</Form.Item>
							<Form.Item>
								<StyledButton block htmlType="submit">Next</StyledButton>
							</Form.Item>
						</Form>
						<StyledHint>
							<Paragraph>
								{!logined ?
									<>
										Already have an account?&nbsp;
										<Link href="/login">Log in</Link>
										<br />
									</> : null}
								<Link onClick={handleShowModal}>Can’t find your activation code?</Link>
							</Paragraph>
						</StyledHint>
					</StyledFormContent>
				</StyledContent>
			</StyledMainContent>
			<ActivateGuide open={showModal} onClose={handleCloseModal} />
		</StyledContainer>
	)
}
