import {
  AlipayCircleOutlined,
  TaobaoCircleOutlined,
  WeiboCircleOutlined,
  ArrowLeftOutlined,
} from '@ant-design/icons';
import { Alert, Checkbox, Input, message, Form, Button } from 'antd';
import React, { useState, useEffect } from 'react';
import { Link, connect, Dispatch, history, Redirect } from 'umi';
import { StateType } from '@/models/login';
import { LoginParamsType } from '@/services/login';
import { ConnectState } from '@/models/connect';
import LoginForm from './components/Login';

import styles from './style.less';
import e from 'express';

const { Tab, UserName, Password, Mobile, Captcha, Submit } = LoginForm;
interface LoginProps {
  dispatch: Dispatch;
  userLogin: StateType;
  submitting?: boolean;
}

let flag = false;

const Login: React.FC<LoginProps> = (props) => {
  const { userLogin = {}, submitting } = props;
  const { status, type: loginType } = userLogin;
  const [type, setType] = useState<string>('account');

  const [userName, setUsername] = useState('');
  // const [password, setPasswd] = useState('');
  const [forgetflag, setForgetFlag] = useState(false);

  const { dispatch } = props;
  const handleSubmit = (values: LoginParamsType) => {
    console.log(values);
    if (forgetflag) {
      console.log('验证码！');
    }

    if (values.userName && values.password) {
      dispatch({
        type: 'login/login',
        payload: { ...values },
      });
    } else {
      message.error('The username or password cannot be empty!');
    }
  };
  const usernameHandle = (e: any) => {
    setUsername(e.target.value);
  };
  // const passwdHandle = (e: any) => {
  //   setPasswd(e.target.value);
  // };

  const returnHandle = (e: any) => {
    history.push('/user/login');
  };
  const gotoForgetHandle = (e: any) => {
    history.push('/user/forget');
  };

  const handleSend = (e: any) => {
    console.log(userName);
    if (
      userName !== '' &&
      /^[a-z0-9]+([._\\-]*[a-z0-9])*@([a-z0-9]+[-a-z0-9]*[a-z0-9]+.){1,63}[a-z0-9]+$/.test(userName)
    ) {
      console.log('邮箱正确!');
      flag = true;
    } else {
      message.warning('Please enter the correct email address!');
    }
  };

  useEffect(() => {
    if (location.pathname == '/user/forget') {
      setForgetFlag(true);
    } else {
      setForgetFlag(false);
    }
  }, [location.pathname]);

  const timeOut = () => {
    if (flag) {
      let number = 60;
      let timeId = setTimeout(() => {
        number--;
        if (number === 0) {
          flag = false;
          clearTimeout(timeId);
        }
      }, 60000);
      return number;
    }
  };

  return (
    <div>
      {/* {forgetflag ? (
        <div style={{ position: 'absolute', top: -50, cursor: 'pointer' }} onClick={returnHandle}>
          <ArrowLeftOutlined style={{ fontSize: '28px' }} />
        </div>
      ) : (
        <div />
      )}
      <LoginForm activeKey={type} onTabChange={setType} onSubmit={handleSubmit}>
        <div className={styles.box1}>
          {forgetflag ? 'Please enter email address' : 'Account Name'}
        </div>
        <input className={styles.input} onChange={usernameHandle} />
        <div className={styles.box1}>
          {forgetflag ? 'Please enter a verification code' : 'Password'}
        </div>
        {forgetflag ? (
          <div className={styles.box2}>
            <input className={styles.input5} onChange={passwdHandle} />
            <div className={styles.button2} style={{ float: 'right' }} onClick={handleSend}>
              Send
            </div>
          </div>
        ) : (
          <div>
            <input className={styles.input2} onChange={passwdHandle} type="password" />
            <div>
              <div className={styles.input3} onClick={gotoForgetHandle}>
                Forget Password
              </div>
              <div className={styles.input4}>
                {status === 'error' && loginType === 'account' && !submitting && (
                  <div>Wrong account or password</div>
                )}
              </div>
            </div>
          </div>
        )}
        <Submit className={styles.button} loading={submitting} style={{ width: 330 }}>
          {forgetflag ? 'Next' : '登录'}
        </Submit>
      </LoginForm> */}
      {forgetflag ? (
        <div style={{ position: 'absolute', top: -50, cursor: 'pointer' }} onClick={returnHandle}>
          <ArrowLeftOutlined style={{ fontSize: '28px' }} />
        </div>
      ) : (
        <div />
      )}
      <Form onFinish={handleSubmit}>
        <div className={styles.box1}>
          {forgetflag ? 'Please enter email address' : 'Account Name'}
        </div>
        <Form.Item name="userName">
          <input className={styles.input} onChange={usernameHandle} />
        </Form.Item>
        <div className={styles.box1}>
          {forgetflag ? 'Please enter a verification code' : 'Password'}
        </div>
        {forgetflag ? (
          <div className={styles.box2}>
            <input className={styles.input5} />
            <div className={styles.button2} style={{ float: 'right' }} onClick={handleSend}>
              {flag ? timeOut : 'Send'}
            </div>
          </div>
        ) : (
          <div>
            <Form.Item name="password">
              <input className={styles.input2} type="password" />
            </Form.Item>
            <div>
              <div className={styles.input3} onClick={gotoForgetHandle}>
                Forget Password
              </div>
              <div className={styles.input4}>
                {status === 'error' && loginType === 'account' && !submitting && (
                  <div>Wrong account or password</div>
                )}
              </div>
            </div>
          </div>
        )}
        <Form.Item>
          <Button
            style={{ width: 330, height: 50, fontSize: 20 }}
            type="primary"
            htmlType="submit"
            shape="round"
          >
            {forgetflag ? 'Next' : 'Submit'}
          </Button>
        </Form.Item>
      </Form>
    </div>
  );
};

export default connect(({ login, loading }: ConnectState) => {
  return {
    userLogin: login,
    submitting: loading.effects['login/login'],
  };
})(Login);
