import React, {
  useEffect,
  useRef,
  useState,
} from 'react';

import {
  Alert,
  Checkbox,
} from 'antd';
import classNames from 'classnames';
import { dom } from 'kit_utils';
import { connect } from 'react-redux';
import { withRouter } from 'react-router-dom';

import { actionCreators } from '../../../containers/App/store';
import LoginForm from './components/Login';
import LoginAction from './Login';
import styles from './style.less';

const { UserName, Password, Submit } = LoginForm;

const LoginMessage = ({ content }) => (
  <Alert
    style={{
      marginBottom: 24,
    }}
    message={content}
    type="error"
    showIcon
  />
);



const Login = props => {
  const { userLogin = {} } = props;
  const videoRef = useRef();
  const loginRef = useRef();
  const timeRef = useRef();
  const titleRef = useRef();
  const loginFormRef = useRef();
  const footerRef = useRef();
  const { status, type: loginType } = userLogin;
  const [autoLogin, setAutoLogin] = useState(true);
  const [submitting, setSubmitting] = useState(false)
  const [currentDate, setCurrentDate] = useState({});
  const [type, setType] = useState('account');


  const handleSubmit = values => {
    /* eslint-disable no-console */
    let loginAction = new LoginAction(props)
    loginAction.login(values.userName, values.password)
    setSubmitting(true)
    loginAction.events.on('loginSuccess', event => {
      setSubmitting(false)
      props.history.push(`/?client=${props.global.client}`);
    })
  };

  let loginTimeInterval = null;
  useEffect(() => {
    if(loginTimeInterval) (clearInterval(loginTimeInterval),loginTimeInterval = null );
    loginTimeInterval = setInterval(() => {
      const date = new Date();
      const weekday = ["周日", "周一", "周二", "周三", "周四", "周五", "周六"];
      const time = (date.getHours() < 10 ? '0' + date.getHours() : date.getHours()) + ':' + (date.getMinutes() <
      10 ? '0' + date.getMinutes() : date.getMinutes()) + ':' + (date.getSeconds() < 10 ? '0' +
      date.getSeconds() : date.getSeconds());
      setCurrentDate({
        time: time,
        dayofweek: weekday[date.getDay()],
        date: date.pattern('yyyy/mm/dd')
      })
    }, 1000);
    return () => {
      loginTimeInterval && clearInterval(loginTimeInterval)
    }
  }, []);

  useEffect(() => {
    if(videoRef) {
      videoRef.current.addEventListener('ended', function() {
        dom.removeClass(loginRef.current, styles.caseHide);
        dom.addClass(loginRef.current, styles.loginTimeShow);
        setTimeout(() => {
          dom.removeClass(timeRef.current, styles.caseHide);
          dom.addClass(timeRef.current, "animate__fadeIn");
          
          dom.removeClass(loginFormRef.current, styles.caseHide);
          dom.addClass(loginFormRef.current, "animate__fadeInUp");
  
          dom.removeClass(footerRef.current, styles.caseHide);
          dom.addClass(footerRef.current, "animate__slideInUp");
          dom.removeClass(titleRef.current, styles.caseHide);
          dom.addClass(titleRef.current, "animte__fadeInUp");
        }, 500);
      })
    }
  }, [videoRef]);

  return (
    <div className={styles.main}>
      <video src="https://panda-water.cn/web4/assets/videos/beforPage.mp4" className={styles.videLayer} autoPlay="autoPlay" muted playsInline="playsinline" ref={videoRef}></video>
      <div className={styles.inner}>
        <div className={classNames(styles.loginTime, styles.caseHide)} ref={loginRef}>
          <img role="logo" src={`https://panda-water.cn/web4/${window.globalConfig.logo}`}/>
          <div className={classNames(styles.titleCase, styles.caseHide, "animated")} ref={titleRef}>
            <span className={styles.title}>{window.globalConfig.title}</span>
            <span className={styles.subtitle}>{window.globalConfig.subtitle}</span>
          </div>
        </div>
        <span className={classNames(styles.divider, styles.caseHide, "animate__animated")}></span>
        <div className={classNames(styles.timeCase, styles.caseHide, "animate__animated")} ref={timeRef}>
            <span className={styles.time}>{currentDate.time}</span>
            <span className={styles.dayofweek}>{currentDate.dayofweek}</span>
            <span className={styles.date}>{currentDate.date}</span>
        </div>
        <div className={classNames(styles['login-block'], styles.caseHide, "animate__animated")} ref={loginFormRef}>
          <div>
            <img src="https://panda-water.cn/web4/assets/images/login/dark/login.png"/>
          </div>
          <div className={styles['login-form']}>
              <LoginForm activeKey={type} onTabChange={setType} onSubmit={handleSubmit}>
                {status === 'error' && loginType === 'account' && !submitting && (
                  <LoginMessage content="账户或密码错误" />
                )}
                <UserName
                  name="userName"
                  placeholder="请输入你的用户名"
                  rules={[
                    {
                      required: true,
                      message: '请输入用户名!',
                    },
                  ]}
                />
                <Password
                  name="password"
                  placeholder="请输入你的密码"
                  rules={[
                    {
                      required: true,
                      message: '请输入密码！',
                    },
                  ]}
                />
                <div>
                  <Checkbox
                    checked={autoLogin}
                    onChange={e => setAutoLogin(e.target.checked)}
                  >
                    下次自动登录
                  </Checkbox>
                </div>
                <Submit loading={submitting}>登录</Submit>
            </LoginForm>
          </div>
       
        </div>
      </div>
      <div className={classNames(styles.footerCase, styles.caseHide, 'animate__animated')} ref={footerRef}>
        <div className={classNames("QuickMark", "QM-wrapper")}>

        </div>
        <span className={classNames(styles.copyright)}>
          Copyright ©
          <a target="_blank" href="https://panda-water.cn">熊猫智慧水务</a>
          {new Date().getFullYear()} All Rights Reserved <a target="_blank" id="IndexCaseNumber" href="">沪ICP备11036640-1</a>
        </span>
      </div>
    </div>
  );
};
const mapStateToProps = (state) => {
  return {
    global: state.getIn(['global', 'globalConfig'])
  }
}

const mapDispatchToProps = (dispatch) => {
  return {
    updateConfig(config) {
      dispatch(actionCreators.getConfig(config))
    }
  }
}
export default connect(mapStateToProps, mapDispatchToProps)(withRouter(Login))