import React, { FC, useState } from 'react'
import {
	StyledContainer,
	StyledImageWrapper,
	StyledMainContent,
	StyledHeadline,
	StyledContent,
	StyledButton,
	StyledTitle, StyledHint, StyledHelp
} from './styled'
import { Form } from 'antd'
import { Paragraph, Link } from '../../../components/Typography'
import { Input, Password, ErrorMessage } from '../../../components/FormControl'
import { ForgetPasswordModal } from './ForgetPasswordModal'

export const Login: FC = () => {
	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>
				<StyledHeadline level={1}>Welcome Back!</StyledHeadline>
				<StyledTitle level={3}>Log in to continue</StyledTitle>
				<StyledContent>
					<Form
						layout="vertical"
						onFinish={onFinish}
					>
						<Form.Item
							label="Email"
							name="email"
							rules={[
								{
									required: true, message: <ErrorMessage message="Please input your email" />
								},
								{ type: 'email', message: <ErrorMessage message="Invalid email" /> }
							]}
						>
							<Input placeholder="email@example.com" />
						</Form.Item>
						<Form.Item
							label="Password"
							name="password"
							rules={[{ required: true, message: <ErrorMessage message="Please input your password" /> }]}
							extra={<StyledHelp type="text" onClick={handleShowModal}>Forgot password</StyledHelp>}
						>
							<Password placeholder="********" />
						</Form.Item>
						<Form.Item>
							<StyledButton block htmlType="submit">Log in</StyledButton>
						</Form.Item>
					</Form>
					<StyledHint>
						<Paragraph>
							Don’t have an account?&nbsp;
							<Link href="/activate">Activate your kit</Link>
						</Paragraph>
					</StyledHint>
				</StyledContent>
			</StyledMainContent>
			<ForgetPasswordModal open={showModal} onClose={handleCloseModal} />
		</StyledContainer>
	)
}
