'use strict';
import React, { useState, useEffect, useRef } from 'react';
import { connect } from 'react-redux';
import { push } from 'react-router-redux';
import SHA1 from 'crypto-js/sha1';
import Hex from 'crypto-js/enc-hex';
import { ApiTable } from '$utils'
import { Request } from '@peace/utils'
import { Button, Input, Form, Row, Col, message, Tabs } from 'antd';
import { login, LOGIN_ERROR } from '../actions/auth';
import { ExclamationCircleOutlined } from '@ant-design/icons';
import { Uploads } from '$components'
import '../style.less';

const FormItem = Form.Item;

let codCountDownInterval = null
const Login = props => {
    const { dispatch, user, error, isRequesting } = props
    const [username, setUserName] = useState('')
    const [password, setPassword] = useState('')
    const [phone, setPhone] = useState('')
    const [code, setCode] = useState('')
    const [inputChanged, setInputChanged] = useState(false)
    const [curTabKey, setCurTabKey] = useState(1)
    const [codSending, setCodSending] = useState(false)
    const [codCountDown, setCodeCountDown] = useState(60)
    const codCountDownRef = useRef(0)

    useEffect(() => {

    }, [])


    useEffect(() => {
        if (user && user.authorized) {
            dispatch(push('/homePage'));
        }
    }, [user])

    useEffect(() => {
        if (codSending) {
            setCodeCountDown(59)
            codCountDownRef.current = 59
            codCountDownInterval = setInterval(() => {
                codCountDownRef.current -= 1
                if (codCountDownRef.current == 0) {
                    setCodSending(false)
                    setCodeCountDown(60)
                    clearInterval(codCountDownInterval)
                    codCountDownInterval = null
                } else {
                    setCodeCountDown(codCountDownRef.current)
                }
            }, 1000);
        } else {
            if (codCountDownInterval) {
                clearInterval(codCountDownInterval)
                codCountDownInterval = null
                setCodeCountDown(60)
            }
        }
    }, [codSending])

    const doLogin = () => {
        if (curTabKey == 1) {
            if (!username || !password)
                dispatch({
                    type: LOGIN_ERROR,
                    payload: { error: '请输入账号名和密码' }
                });
            setInputChanged(false)
            dispatch(login({ username, password }));
        } else {
            if (!phone || !code)
                dispatch({
                    type: LOGIN_ERROR,
                    payload: { error: '请输入手机号和验证码' }
                });
            dispatch(login({ phone, code }));
        }
    }

    const enterHandler = e => {
        if (e.key === 'Enter') {
            doLogin()
        }
    };

    return (
        <div
            id='loginContainer'
            style={{
                height: '100vh',
                display: 'flex',
                alignItems: 'center',
                justifyContent: 'center',
                color: 'aliceblue',
                backgroundImage: 'url(/assets/images/login_bg.png)'
            }}
        >
            <img src='/assets/images/logo.png' style={{ height: 42, borderRadius: 4, position: 'fixed', top: 32, left: 32 }} />

            <div style={{ width: 1000, backgroundColor: '#01316d', borderRadius: 24 }}>
                <Row>
                    <Col span={12} style={{}}>
                        <img src='/assets/images/login.png' width={'100%'} />
                    </Col>
                    <Col span={12}>
                        <div style={{
                            width: '100%',
                            height: '100%',
                            padding: 30,
                            display: 'flex',
                            flexDirection: 'column',
                            justifyContent: 'space-around'
                        }}>
                            <p style={{ fontSize: 30, fontWeight: 'bold', textAlign: 'center' }}>
                                政务数据资源中心
                            </p>
                            <Tabs defaultActiveKey="1" animated={true} onChange={(k) => {
                                setCurTabKey(k)
                            }}>
                                <Tabs.TabPane tab="用户名登录" key="1">
                                    <Form onKeyDown={enterHandler}>
                                        <div style={{ fontSize: 10, fontWeight: 'bold' }}>
                                            用户名
                                        </div>
                                        <FormItem name="username">
                                            <Input
                                                type="text"
                                                size="large"
                                                value={username}
                                                placeholder="用户名"
                                                onChange={e => {
                                                    setUserName(e.target.value)
                                                    setInputChanged(true)
                                                }}
                                            />
                                        </FormItem>
                                        <div style={{ fontSize: 10, fontWeight: 'bold' }}>
                                            密码
                                        </div>
                                        <FormItem name="password">
                                            <Input
                                                type="password"
                                                size="large"
                                                value={password}
                                                placeholder="密码"
                                                onChange={e => {
                                                    setPassword(e.target.value)
                                                    setInputChanged(true)
                                                }}
                                            />
                                        </FormItem>
                                    </Form>
                                </Tabs.TabPane>
                                <Tabs.TabPane tab="手机登录" key="2" disabled>
                                    <Form onKeyDown={enterHandler}>
                                        <div style={{ fontSize: 10, fontWeight: 'bold' }}>
                                            手机号
                                        </div>
                                        <FormItem name="phone" rules={[{ pattern: /^1[3|4|5|7|8|9]\d{9}$/, message: '请输入正确的手机号码' }]}>
                                            <Input
                                                type="text"
                                                size="large"
                                                value={username}
                                                onChange={e => {
                                                    setPhone(e.target.value)
                                                    setInputChanged(true)
                                                }}
                                            />
                                        </FormItem>
                                        <div style={{ fontSize: 10, fontWeight: 'bold' }}>
                                            验证码
                                        </div>
                                        <FormItem name="code">
                                            <Input.Group compact>
                                                <Input
                                                    size="large"
                                                    style={{ width: 'calc(100% - 112px)' }}
                                                    onChange={e => {
                                                        setCode(e.target.value)
                                                        setInputChanged(true)
                                                    }}
                                                />
                                                <Button
                                                    size="large"
                                                    onClick={() => {
                                                        setCodSending(true)
                                                        const random = Math.floor(Math.random() * Math.pow(10, 4));
                                                        const sig = Hex.stringify(SHA1(phone + random));
                                                        setInputChanged(false)
                                                        Request.post(ApiTable.validatePhone, {
                                                            phone: phone,
                                                            r: random,
                                                            sig: sig
                                                        }).then(res => {

                                                        }, err => {
                                                            let message = err.response.body?.message
                                                            console.log(message);
                                                            dispatch({
                                                                type: LOGIN_ERROR,
                                                                payload: { error: message || '获取验证码失败' }
                                                            });
                                                            setCodSending(false)
                                                        });
                                                    }}
                                                    loading={codSending}
                                                    style={{ width: 112 }}
                                                >
                                                    {codSending ? codCountDown + ' s' : '发送验证码'}
                                                </Button>
                                            </Input.Group>
                                        </FormItem>
                                    </Form>
                                </Tabs.TabPane>
                            </Tabs>

                            <Row style={{
                                textAlign: 'left'
                            }}>
                                {
                                    inputChanged || !error ?
                                        <span style={{
                                            visibility: 'hidden'
                                        }}>-</span> :
                                        <span>
                                            <ExclamationCircleOutlined style={{ color: 'red' }} />{error}
                                        </span>
                                }
                            </Row>
                            <Button
                                shape="round"
                                size="large"
                                style={{ width: '100%' }}
                                loading={isRequesting}
                                onClick={doLogin}
                            >
                                登录
                            </Button>
                        </div>
                    </Col>
                </Row>
            </div>
        </div >
    );
}

function mapStateToProps(state) {
    const { auth } = state;
    console.log(auth.error);
    return {
        user: auth.user,
        error: auth.error,
        isRequesting: auth.isRequesting
    }
}

export default connect(mapStateToProps)(Login);