import 'kit_utils/lib/format';

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

import { Modal } from 'antd';
import classNames from 'classnames';
import { dom } from 'kit_utils';
import { Helmet, HelmetProvider } from 'react-helmet-async';
import { connect } from 'react-redux';
import { useHistory, withRouter } from '@wisdom-utils/runtime';

import { LOGIN_DISPLAY, LOGIN_WAY } from '@/constants';
import { actionCreators } from '@/containers/App/store';
import defaultSetting from '../../../../../config/defaultSetting';
import LoginAction from '../login';
import styles from '../style.less';
import useRenderQcode from '../js/useRenderQcode';
import Account from '../js/useAccount';
import IotComponent from '../js/useIOTComponent';
import { initMicroApps } from '../../../../micro';
const Login = forwardRef((props, _ref) => {
  const videoRef = useRef();
  const loginRef = useRef();
  const timeRef = useRef();
  const titleRef = useRef();
  const sliVerify = useRef();
  const loginFormRef = useRef();
  const formRef = useRef(null);
  const footerRef = useRef();
  const [status, setStatus] = useState('normal');
  const [autoLogin, setAutoLogin] = useState(false);
  const [submitting, setSubmitting] = useState(false);
  const [currentDate, setCurrentDate] = useState({});
  const [type, setType] = useState('Account');
  const [visible, setVisible] = useState(false);
  const history = useHistory();
  const [action, setAction] = useState(
    () => new LoginAction(Object.assign({}, props, {history}), setVisible, true),
  );

  useEffect(() => {
    action.globalConfig = props.global;
  }, [props.global]);

  const handleSubmit = values => {
    /* eslint-disable */
    action &&
    (type === 'Account'
      ? action.loginHandler(
        values.userName,
        values.password,
        null,
        autoLogin,
        sliVerify,
      )
      : type === 'Mobile'
        ? action.phoneLoginFormHandler(values.mobile, values.captcha)
        : null);

    setSubmitting(true);
    props.updateCurrentIndex && props.updateCurrentIndex(-1);
    action && action.events.on('loginSuccess', event => {
      setSubmitting(false);
      props.updateCurrentIndex && props.updateCurrentIndex(0);
      props.history.push(`/`);
      // debugger
      // window.share.event.emit('triggerMicro', props.global);
      initMicroApps();
    });
    action && action.events.on('loginError', event => {
      setVisible(false);
      setSubmitting(false);
    });
    action && action.events.on('loginVisible', status => {
      setVisible(status);
    });
  };

  useEffect(() => {
    if (props.loginMode === LOGIN_WAY.WeChart) {
      action &&
      action.events.on('loginSuccess', event => {
        props.history.push(`/?client=${props.global.client}`);
        // window.share.event.emit('triggerMicro', props.global);
        initMicroApps();
      });
      action &&
      action.events.on('loginError', event => {
        setVisible(false);
        setSubmitting(false);
      });
    }
  }, [props.loginMode]);

  let loginTimeInterval = null;
  let videoTimeout = 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,
        dayofweek: weekday[date.getDay()],
        date: date.pattern('yyyy/MM/dd'),
      });
    }, 1000);
    return () => {
      loginTimeInterval && clearInterval(loginTimeInterval);
    };
  }, []);

  useEffect(() => {
    if (videoRef && videoRef.current) {
      videoRef.current.addEventListener('ended', function() {
        dom.removeClass(loginRef.current, styles.caseHide);
        dom.addClass(loginRef.current, styles.loginTimeShow);
        videoTimeout = 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);
      });
    }

    return () => {
      videoTimeout && clearTimeout(videoTimeout);
      videoRef.current.removeEventListener('ended', () => {});
    };
  }, [videoRef]);
  useEffect(() => {
    setSubmitting(false);
  }, [visible]);
  const renderAddons = useRenderQcode(props.global);
  const renderPlatform = () => {
    const template = props.global.loginTemplate;
    const params = {
      fromRef: formRef,
      type,
      setType,
      status,
      submitting,
      autoLogin,
      setAutoLogin,
      action,
      onSubmit: handleSubmit,
      loginMode: props.loginMode,
      updateLoginMode: props.updateLoginMode,
    };
    switch (template) {
      case 'DarkCloud.html':
      case 'Dark.html':
        return <Account {...params} />;
      case 'Dark - IOTMultiLogin.html':
        return <IotComponent {...params} />;
      default:
        return <Account {...params} />;
    }
  };
  /* eslint-disable */

  return (
    <HelmetProvider>
      <Helmet>
        <title>{props.global.title || defaultSetting.title}</title>
        <meta name="description" content={props.global.title || defaultSetting.title} />
      </Helmet>
      <div className={styles.main}>
        <video
          src={require("../../../../assets/videos/beforPage.mp4") }
          className={styles.videLayer}
          autoPlay="autoPlay"
          muted
          playsInline="playsinline"
          ref={videoRef}
        />
        <div className={styles.inner}>
          <div
            className={classNames(styles.loginTime, styles.caseHide)}
            ref={loginRef}
          >
            <img
              role="logo"
              src={props.global && props.global.transformDevAssetsBaseURL && props.global.transformDevAssetsBaseURL(props.global.logo)}
            />
            <div
              className={classNames(
                styles.titleCase,
                styles.caseHide,
                'animated',
              )}
              ref={titleRef}
            >
              <span className={styles.title}>{props.global.title}</span>
              <span className={styles.subtitle}>
              {window.globalConfig.subtitle}
            </span>
            </div>
          </div>
          <span
            className={classNames(
              styles.divider,
              styles.caseHide,
              'animate__animated',
            )}
          />
          <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']}>{renderPlatform()}</div>
          </div>
        </div>
        <div
          className={classNames(
            styles.footerCase,
            styles.caseHide,
            'animate__animated',
          )}
          ref={footerRef}
        >
          <div className={classNames(styles.quickMark)}>{renderAddons}</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 className="addons">
            <span className="split" />
            <a id="qrcode">
              <span
                className="glyphicon glyphicon-qrcode"
                role="button"
                title="手持APP下载"
              />
            </a>
          </span>
        </span>
        </div>
        <Modal
          centered
          visible={visible}
          width={340}
          footer={null}
          closable={false}
          bodyStyle={{ padding: '15px' }}
        >
          <div ref={sliVerify} />
        </Modal>
      </div>
    </HelmetProvider>
  );
});

const mapStateToProps = state => ({
  global: state.getIn(['global', 'globalConfig']),
  loginMode: state.getIn(['global', 'loginMode']),
});

const mapDispatchToProps = dispatch => ({
  updateConfig(config) {
    dispatch(actionCreators.getConfig(config));
  },
  createContext(data) {
    dispatch(actionCreators.createContext(data));
  },
  updateLoginMode(mode) {
    dispatch(actionCreators.changeLoginMode(mode));
  },
  updateCurrentIndex(index) {
    dispatch(actionCreators.updateCurrentIndex(index));
  },
});
export default connect(
  mapStateToProps,
  mapDispatchToProps,
)(withRouter(Login));
