/** @format */

import * as React from 'react';
import { useHistory } from 'react-router-dom';
import { Form, notification, Icon, Typography } from 'antd';
import { FormComponentProps } from 'antd/es/form';
import Particles from 'react-particles-js';
import { adminUserNamePattern, adminPasswordPattern } from '../../const/regular';
import useLogin from '../../service/login';
import { detectCapsLock } from '../../utils/utils';
import { getLocalStorage } from '../../utils/webStorage';
import Button from '../../components/button';
import Input from '../../components/input';
import styles from './index.module.scss';
import top from './image/top.svg';
import middle from "./image/middle.svg";
import below from "./image/below.svg";
import right from "./image/right.svg";
import left from "./image/left.svg"
const { Text } = Typography;

const Index: React.FC<FormComponentProps> = props => {
    let history = useHistory();
    const [state, setState] = React.useState({
        capsLock: false,
    });
    const [loginState, requestLogin] = useLogin();
    const { getFieldDecorator } = props.form;
    React.useEffect(() => {
        const [error, userInfo] = getLocalStorage('userinfo');
        if (!error && userInfo && userInfo.token && userInfo.admin_id && userInfo.userName) {
            history.push('/home');
        }
    }, []);
    const handleSubmit = React.useCallback(
        (e: React.FormEvent) => {
            e.preventDefault();
            props.form.validateFields((err, values) => {
                if (!err) {
                    requestLogin(values).then(error => {
                        if (error) {
                            return notification.error({
                                message: '登录失败!',
                                description: error,
                            });
                        }
                        history.push('/home');
                    });
                }
            });
        },
        [requestLogin, props.form],
    );

    return (
        <div className={styles.loginWrapper}>
            {/* <Particles
                className={styles.particlesWrapper}
                params={{
                    interactivity: {modes: {grab: {distance: 2}, bubble: {distance: 24, size: 0}}, detect_on: 'canvas'},
                    polygon: {
                        type: 'inside',
                        move: {
                            radius: 10,
                        },
                    },
                    particles: {
                        shape: {type: 'circle', polygon: {nb_sides: 3}, stroke: {width: 1, color: '#000000'}},
                        color: {value: '#000000'},
                        number: {value: 160, density: {enable: true}},
                        size: {value: 1, random: true},
                    },
                }}
            /> */}
            <div className={styles.loginFormModal}>
                <h1>勤添筑数据中台</h1>
                <img className="logo" src={top} alt="" />
                <div style={{ display: "flex", position: "relative", alignItems: "center", margin: "20px 0" }}>
                    <img className="logo" src={left} style={{ position: "absolute", left: "-20px" }} />
                    <img className="logo" src={left} style={{ position: "absolute", left: "-10px" }} />
                    <img className="logo" src={middle} />
                    <img className="logo" src={right} style={{ position: "absolute", right: "-10px" }} />
                    <img className="logo" src={right} style={{ position: "absolute", right: "-20px" }} />
                </div>
                <img className="logo" src={below} alt="" />
                <Form onSubmit={handleSubmit} className={styles['login-form']}>
                    <Form.Item>
                        {getFieldDecorator('username', {
                            rules: [
                                { required: true, message: '请输入用户名!' },
                                {
                                    pattern: adminUserNamePattern,
                                    message: '账号由数字或者字母组成,且大于2位不能超过12位',
                                },
                            ],
                            initialValue: '',
                        })(
                            <Input
                                prefix={<Icon type='user' style={{ color: '#05EFF8' }} />}
                                placeholder='请输入账号'
                                allowClear
                            />,
                        )}
                    </Form.Item>
                    <Form.Item>
                        {getFieldDecorator('password', {
                            rules: [
                                { required: true, message: '请输入您的密码!' },
                                {
                                    pattern: adminPasswordPattern,
                                    message: '字母和数字的组合，不少于8个字符，不超过12个字符',
                                },
                            ],
                            initialValue: '',
                        })(
                            <Input.PassWord
                                prefix={<Icon type='lock' style={{ color: '#05EFF8' }} />}
                                allowClear
                                placeholder='请输入密码'
                                onKeyPress={(event: React.KeyboardEvent<HTMLInputElement>) => {
                                    setState(preState => ({ ...preState, capsLock: detectCapsLock(event) }));
                                }}
                            />,
                        )}
                    </Form.Item>
                    {state.capsLock ? <Text type='warning'>大写键盘已开启</Text> : null}
                    <Form.Item>
                        <Button
                            loading={loginState.loading}
                            block
                            type='primary'
                            htmlType='submit'
                            className='login-form-button'
                        >
                            登录
                        </Button>
                    </Form.Item>
                </Form>
            </div>
        </div>
    );
};
Index.displayName = 'login';
export default Form.create({ name: 'normal_login' })(Index);
