import * as React from 'react';
import moment from 'moment';
import storage from '../../utils/storage';

import { message, Button } from 'antd';
import { RouteComponentProps } from 'react-router-dom';
import { useUserLogin } from '../../hooks/user';
import './index.scss';

const login: React.FC<RouteComponentProps> = ({ history }) => {
	const [loginState, requestLogin] = useUserLogin();
	const [formState, setFormState] = React.useState({
		password: '',
		username: '',
		remberPassword: true,
	});
	const onChangeInput = (propIndex, value) => {
		setFormState((preState) => ({ ...preState, [propIndex]: value }));
	};
	const onSubmit = () => {
		const { password, username, remberPassword } = formState;
		if (loginState.loading) {
			return;
		}
		if (!username) {
			message.error('请输入用户名');
			return;
		}
		if (!password) {
			message.error('请输入密码');
			return;
		}
		requestLogin({
			user: username,
			password: password,
			rember_password: remberPassword,
		})
			.then((data) => {
				let expireTime =
					moment()
						.add(24, 'hour')
						.unix() * 1000;
				if (remberPassword) {
					expireTime =
						moment()
							.add(7, 'day')
							.unix() * 1000;
				}
				storage.setItem('uid', data.uid);
				storage.setItem('token', data.token);
				storage.setItem('username', username);
				storage.setItem('refresh_token', data.refresh_token, expireTime);
				message.success('登录成功', 1, () => {
					location.href = '/';
				});
			})
			.catch((error) => {
				message.error(error.message, 2);
			});
	};
	return (
		<div className='login-wrapper'>
			<div className='app-name'>
				<svg>
					<defs>
						<linearGradient id='grad' x1='50%' y1='0%' x2='50%' y2='100%'>
							<stop
								offset='0%'
								style={{ stopColor: '#04cde7', stopOpacity: 1 }}
							/>
							<stop
								offset='100%'
								style={{ stopColor: '#2b39ed', stopOpacity: 1 }}
							/>
						</linearGradient>
					</defs>
					<text
						x='50%'
						y='50%'
						textAnchor='middle'
						dominantBaseline='middle'
						fill='url(#grad)'
						style={{ fontSize: 40 }}>
						建筑工地智慧监控云平台
					</text>
				</svg>
			</div>
			<div className='login-box'>
				<div className='left-wrapper'></div>
				<div className='center-wrapper'></div>
				<div className='right-wrapper'>
					<h3>欢迎登陆</h3>
					<div className='form-input input-username'>
						<div></div>
						<input
							type='text'
							readOnly={loginState.loading}
							placeholder='请输入用户名'
							value={formState.username}
							onChange={(event) =>
								onChangeInput('username', event.target.value)
							}
						/>
					</div>
					<div className='form-input input-password'>
						<div></div>
						<input
							type='password'
							readOnly={loginState.loading}
							placeholder='请输入密码'
							value={formState.password}
							onChange={(event) =>
								onChangeInput('password', event.target.value)
							}
						/>
					</div>

					<div className='extra-opertion'>
						<label htmlFor=''>
							<input
								type='checkbox'
								checked={formState.remberPassword}
								onChange={() => {
									onChangeInput('remberPassword', !formState.remberPassword);
								}}
								readOnly={loginState.loading}
							/>
							<span>记住密码</span>
						</label>
					</div>
					<div>
						<Button
							loading={loginState.loading}
							className='form-button'
							onClick={onSubmit}>
							登录
						</Button>
					</div>
				</div>
			</div>
		</div>
	);
};
export default login;
