import { LockOutlined, MobileOutlined, UserOutlined } from '@ant-design/icons';

import { CaptchaModal } from '@/components';
import { aesEncrypt } from '@/utils/aes';
import { getRedirectUrl } from '@/utils/getRedirectUrl';
import { Helmet } from '@@/exports';
import {
	LoginFormPage,
	ProFormCaptcha,
	ProFormCheckbox,
	ProFormInstance,
	ProFormText,
} from '@ant-design/pro-components';
import { useModel } from '@umijs/max';
import { message, Spin, Tabs, theme } from 'antd';
import { useEffect, useRef, useState } from 'react';
import styled from 'styled-components';

const LoginForm = styled.div`
	background-color: white;
	height: 100vh;
	display: flex;
	justify-content: center;
	align-items: center;

	:global(.ant-pro-form-login-container) {
		height: auto !important;
		flex: inherit !important;
	}
`;

type LoginType = 'phone' | 'account' | 'wechat';

const Login = () => {
	const [loading, setLoading] = useState(true);

	useEffect(() => {
		getRedirectUrl().then(() => {
			setTimeout(function () {
				setLoading(false);
			}, 800);
		});
	}, []);

	const { passwordLogin } = useModel('useUser', (model) => ({
		passwordLogin: model.passwordLogin,
	}));
	const { initialState } = useModel('@@initialState');

	const [loginType, setLoginType] = useState<LoginType>('account');
	const { token } = theme.useToken();

	const [visible, setVisible] = useState<boolean>(false);
	const formRef = useRef<ProFormInstance>();

	if (loading) {
		return (
			<LoginForm>
				<Spin />
			</LoginForm>
		);
	}

	return (
		<LoginForm>
			<CaptchaModal
				visible={visible}
				setVisible={setVisible}
				onFinish={async (token: string) => {
					const data = formRef.current?.getFieldsValue();
					console.log('token:', token);
					await passwordLogin({
						...data,
						password: aesEncrypt(data.password),
						token,
					});
				}}
			/>
			<Helmet>
				<title>{initialState?.channel?.title}</title>
			</Helmet>
			<LoginFormPage
				backgroundImageUrl={initialState?.channel?.backgroundImageUrl}
				logo={initialState?.channel?.logo}
				title={initialState?.channel?.title}
				subTitle={initialState?.channel?.subTitle}
				formRef={formRef}
				onFinish={async () => {
					setVisible(true);
				}}
				// actions={
				// 	<div
				// 		style={{
				// 			display: 'flex',
				// 			justifyContent: 'center',
				// 			alignItems: 'center',
				// 			flexDirection: 'column',
				// 		}}
				// 	>
				// 		<Divider plain>
				// 			<span
				// 				style={{
				// 					color: token.colorTextPlaceholder,
				// 					fontWeight: 'normal',
				// 					fontSize: 14,
				// 				}}
				// 			>
				// 				其他登录方式
				// 			</span>
				// 		</Divider>
				// 		<Space align="center" size={24}>
				// 			<div
				// 				style={{
				// 					display: 'flex',
				// 					justifyContent: 'center',
				// 					alignItems: 'center',
				// 					flexDirection: 'column',
				// 					height: 40,
				// 					width: 40,
				// 					border: '1px solid ' + token.colorPrimaryBorder,
				// 					borderRadius: '50%',
				// 				}}
				// 			>
				// 				<AlipayOutlined style={{ ...iconStyles, color: '#1677FF' }} />
				// 			</div>
				// 			<WechatQrcodeLogin />
				// 		</Space>
				// 	</div>
				// }
			>
				<Tabs
					centered
					activeKey={loginType}
					onChange={(activeKey) => setLoginType(activeKey as LoginType)}
				>
					<Tabs.TabPane key={'account'} tab={'密码登录'} />
					{/*<Tabs.TabPane key={'phone'} tab={'短信登录'} />*/}
				</Tabs>
				{loginType === 'account' && (
					<>
						<ProFormText
							name="username"
							fieldProps={{
								size: 'large',
								prefix: (
									<UserOutlined
										style={{
											color: token.colorText,
										}}
										className={'prefixIcon'}
									/>
								),
							}}
							placeholder={'请输入手机号码或者邮箱'}
							rules={[
								{
									required: true,
									message: '请输入手机号码或者邮箱！',
								},
							]}
						/>
						<ProFormText.Password
							name="password"
							fieldProps={{
								size: 'large',
								prefix: (
									<LockOutlined
										style={{
											color: token.colorText,
										}}
										className={'prefixIcon'}
									/>
								),
							}}
							placeholder={'请输入密码'}
							rules={[
								{
									required: true,
									message: '请输入密码！',
								},
							]}
						/>
					</>
				)}
				{loginType === 'phone' && (
					<>
						<ProFormText
							fieldProps={{
								size: 'large',
								prefix: (
									<MobileOutlined
										style={{
											color: token.colorText,
										}}
										className={'prefixIcon'}
									/>
								),
							}}
							name="mobile"
							placeholder={'请输入手机号'}
							rules={[
								{
									required: true,
									message: '请输入手机号！',
								},
								{
									pattern: /^1\d{10}$/,
									message: '手机号格式错误！',
								},
							]}
						/>
						<ProFormCaptcha
							fieldProps={{
								size: 'large',
								prefix: (
									<LockOutlined
										style={{
											color: token.colorText,
										}}
										className={'prefixIcon'}
									/>
								),
							}}
							captchaProps={{
								size: 'large',
							}}
							placeholder={'验证码'}
							captchaTextRender={(timing, count) => {
								if (timing) {
									return `${count} ${'获取验证码'}`;
								}
								return '获取验证码';
							}}
							name="captcha"
							rules={[
								{
									required: true,
									message: '请输入验证码！',
								},
							]}
							onGetCaptcha={async () => {
								message.success('获取验证码成功！验证码为：1234');
							}}
						/>
					</>
				)}
				<div
					style={{
						marginBlockEnd: 24,
					}}
				>
					<ProFormCheckbox noStyle name="autoLogin">
						自动登录
					</ProFormCheckbox>
					{/*<a*/}
					{/*	style={{*/}
					{/*		float: 'right',*/}
					{/*	}}*/}
					{/*>*/}
					{/*	忘记密码*/}
					{/*</a>*/}
				</div>
			</LoginFormPage>
		</LoginForm>
	);
};

export default () => {
	return <Login />;
};
