import React, { FC } from 'react'
import styled from 'styled-components'
import { Captcha, ErrorMessage } from 'components/FormControl'
import { Modal, ModalProps } from 'components/Modal'
import { Title, Paragraph, Text } from 'components/Typography'
import { ReactComponent as EmailSvg } from './images/email.svg'
import { ReactComponent as EmailWarningSvg } from './images/emailWarning.svg'
import { Form } from 'antd'
import { Button } from 'components/Button'
import { Breakpoint } from 'components/Breakpoint'
import { observer } from 'mobx-react-lite'
import { AuthStore } from 'stores/AuthStore'
import { Paths } from 'routes/Paths'

type Props = Pick<ModalProps, 'open'> & {
	onClose?: (success: boolean) => void
}

const StyledContent = styled.div`
  display: flex;
  flex-direction: row;
  height: 366px;
  justify-content: center;
  align-items: center;
`
const StyledImageWrapper = styled.div`
  flex: 0 0 250px;

  > svg {
	width: 250px;
	height: 235px;
  }
`

const StyledFormWrapper = styled.div`
  flex: 1;
  padding-left: 44px;

  ${props => props.theme.breakpoints.down('s')} {
	padding-left: 5px;
  }
`

const StyledFormTitle = styled(Title)`
  ${props => props.theme.breakpoints.up('s')} {
	margin-bottom: 4px !important;
  }
`
const StyledCodeFormItem = styled(Form.Item)`
  padding: 28px 0;

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

const StyledRegisterTitle = styled(Title)`
  ${props => props.theme.breakpoints.up('s')} {
	margin-bottom: 28px !important;
  }
`

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

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

const StyledRegisterImageWrapper = styled.div`
	text-align: center;
	margin-bottom: 19px;
  > svg {
    width: 188px;
    height: 176px;
  }
`

export const VerifyModal: FC<Props> = observer(({ onClose, ...props }) => {
	const { userInfo } = AuthStore.instance()
	const [expried, setExpried] = React.useState('9:45')
	const [hasRegistered, setHasRegistered] = React.useState(false)
	const handleSendCode = () => {}
	const handleClose = (success: boolean) => () => {
		onClose && onClose(success)
	}
	const handleFinish = ({ code }: { code: string }) => {
		console.log(code)
		// TODO: 验证
		handleClose(true)()
	}
	return (
		<Modal {...props} onCancel={handleClose(false)} width={688}>
			<StyledContent>
				<Breakpoint s up>
					<StyledImageWrapper>
						<EmailSvg />
					</StyledImageWrapper>
				</Breakpoint>
				<StyledFormWrapper>
					{hasRegistered ? (
						<>
							<Breakpoint s down>
								<StyledRegisterImageWrapper>
									<EmailWarningSvg />
								</StyledRegisterImageWrapper>
							</Breakpoint>
							<StyledRegisterTitle level={2}>Email address is already registered</StyledRegisterTitle>
							<StyledParagraph>Please login to your existing account.</StyledParagraph>
							<Button htmlType="submit" block href={Paths.Login}>Log in</Button>
						</>
					) : (
						<>
							<StyledFormTitle level={2}>Verify your email</StyledFormTitle>
							<Paragraph>A 6-digit code has been sent to {userInfo?.email}</Paragraph>
							<Form layout="vertical" onFinish={handleFinish}>
								<StyledCodeFormItem name="code" rules={[
									{
										required: true, message: <ErrorMessage message="Please input your verification code" />
									},
									{
										len: 6,
										validateTrigger: 'onSubmit',
										message: <ErrorMessage message="The verification code you entered is invalid." />
									},
								]}>
									<Captcha />
								</StyledCodeFormItem>
								<Paragraph>The code will expire in {expried}</Paragraph>
								<Paragraph>Didn’t receive the code? <Text primary inherit onClick={handleSendCode}>Send
									again</Text></Paragraph>
								<Form.Item style={{ marginTop: 16 }}>
									<Button htmlType="submit" block>Verify</Button>
								</Form.Item>
							</Form></>)}
				</StyledFormWrapper>
			</StyledContent>
		</Modal>
	)
})
