import {
  AlipayCircleOutlined,
  TaobaoCircleOutlined,
  WeiboCircleOutlined,
  ArrowLeftOutlined,
} from '@ant-design/icons';
import { Alert, Checkbox, Input } 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;
}

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 handleSubmit = (values: LoginParamsType) => {
    const { dispatch } = props;
    console.log({ ...values, type, userName, password });
    console.log(props);
    console.log(dispatch, 'dispatch');
    dispatch({
      type: 'login/login',
      payload: { userName, password },
    });
  };
  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('触发了发送事件', e);
    console.log(password);
    if (
      password !== '' &&
      /^[a-z0-9]+([._\\-]*[a-z0-9])*@([a-z0-9]+[-a-z0-9]*[a-z0-9]+.){1,63}[a-z0-9]+$/.test(password)
    ) {
      console.log('邮箱正确!');
    } else {
      console.log('邮箱格式错误!');
    }
  };

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

  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}>Account Number</div>
        <input className={styles.input} onChange={usernameHandle} />
        <div className={styles.box1}>{forgetflag ? 'Please enter email address' : '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>
    </div>
  );
};

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