import React, { useCallback, useEffect, useMemo, useState } from 'react';

import { Space, Spin } from 'antd';
import classNames from 'classnames';
import { connect } from 'react-redux';

import { useIntl } from '@wisdom-utils/components';
import { useDocumentTitle } from '@ant-design/pro-utils';

import { useHistory } from '@wisdom-utils/runtime';
import defaultSetting from '@wisdom-utils/components/lib/AppLayout/layouts/defaultSettings'
import { actionCreators } from '../../containers/App/store';
import SecurityLayout from '../../layouts/SecurityLayout';
import LoginAction from '../user/login/login';
import styles from './index.less';
import { defaultApp } from '@/micro';
import usingIcon from '@/assets/bootPage/using-icon.png';
import { appService } from '@/api';

const industries = [
  { name: '供水', type: '供水', subTitle: 'WATER SUPPLY' },
  { name: '农饮水', type: '农饮水', subTitle: 'RURAL POTABLE WATER' },
  { name: '排水', type: '排水', subTitle: 'DRAINAGE' },
  { name: '能源', type: '能源', subTitle: 'ENERGY SOURCES' },
  { name: '直饮水', type: '直饮水', subTitle: 'DRINGKING WATER' },
  // { name: '水资源', type: '水资源', subTitle: 'WATER RESOURCES' },
  { name: '大数据', type: '大数据', subTitle: 'BIG DATA' },
  { name: '熊猫智能实验室', type: '实验室', subTitle: 'PANDA AI. LAB' },
  { name: '项目案例', type: '项目案例', subTitle: 'PROJECT CASE' },
];
const renderIndustries = (config, callback) =>
  industries.map(item => {
    if (
      config &&
      config.userInfo &&
      config.userInfo.Industries &&
      config.userInfo.Industries instanceof Array &&
      config.userInfo.Industries.indexOf(item.type) > -1
    ) {
      return (
        <li
          className={styles.bootPageLi}
          key={item.type}
          onClick={event => callback(event, item.type)}
        >
          <div className={styles.bootPageList}>
            <div className={styles.listMain}>
              <img
                src={require(`../../assets/bootPage/${item.type}.png`)}
                alt=""
              />
              <span className={styles.bootPageName}>{item.name}</span>
              <span className={styles.bootPageNameEng}>{item.subTitle}</span>
            </div>
          </div>
        </li>
      );
    }
  });

// let loginAction = null;
const BootPage = props => {
  const [loadding, setLoadding] = useState(false);
  const [hasRole, setHasRole] = useState(false);
  const [scale, setScale] = useState(1);
  const [loginAction, setAction] = useState(() => new LoginAction(props));
  const history = useHistory();
  useDocumentTitle(
    { title: defaultSetting.title, id: '', pageName: '行业切换' },
    props.global.title || defaultSetting.title,
  );
  const handlePage = useCallback(
    (event, type) => {
      event.persist();
      event.preventDefault();
      setLoadding(true);
      const config = props.global;
      // const loginAction = new LoginAction(props);
      config.uiwidgets = [];
      config.widgets = [];
      config.allWidgets = [];
      props.instance && props.instance.updateConfig(config);
      // props.instance && props.instance.getUserInfoAndConfig('', true, type);
      loginAction && loginAction.getUserInfoAndConfig('', true, type);
    },
    [loginAction, props.global.token, props.instance],
  );
  useEffect(() => {
    // eslint-disable-next-line no-use-before-define
    handleResize();
  }, []);
  const handleResize = () => {
    const width = document.documentElement.clientWidth;
    const height = document.documentElement.clientHeight;
    // eslint-disable-next-line no-shadow
    const scale = width / 1920;
    setScale(scale);
  };
  useEffect(() => {
    window.addEventListener('resize', handleResize);

    const handleToggleIndustry = event => {
      setLoadding(false);
      props.history.push(`/?client=${props.global.client}`);
      defaultApp();
      window.share.event.emit('triggerMicro', props.global);
      props.updateCurrentIndex(0);
    };
    loginAction.events.on('toggleIndustry', handleToggleIndustry);
    return () => {
      window.removeEventListener('resize', handleResize);
      loginAction.events.removeListener('toggleIndustry', handleToggleIndustry);
    };
  }, [loginAction.events, props]);
  const renderIndustr = useMemo(
    () => renderIndustries(props.global, handlePage),
    [handlePage, props.global.token],
    );
  const intl = useIntl();

  const toOMSUsingAnalysis = e => {
    e && e.stopPropagation();
    props.history.push(`/usingAnalysis`);
  };

  useEffect(() => {
    appService
      .getUserInfo({
        token: props.global.token,
        subOID: 'subOID',
        site: 'cloud',
        ignoreSite: true,
      })
      .then(res => {
        const roles = res && !res.errMsg ? res.roles : null;
        const _hasRole =
          roles &&
          Array.isArray(roles) &&
          roles.filter(r => r.name == '客户运维管理员').length;
        setHasRole(!!_hasRole);
      });
  }, [props.global.token]);

  return (
    <SecurityLayout>
      <div className={styles.bootPage}>
        <div className={styles.bootPageMain}>
          <header className={styles.bootPageHead}>
            {/* eslint-disable-next-line jsx-a11y/alt-text */}
            <img src="https://panda-water.cn/web4/assets/images/bootPage/熊猫图标.png" />
            <div className={styles.bootPageTitle}>
              <span className={styles.bootPageZh}>
                {intl.formatMessage({ id: 'app.settings.bootpage.title' })}
              </span>
              <span className={styles.bootPageEn}>
                Panda Smart City Monitoring Management Platform & Solution
              </span>
            </div>
          </header>
          <section
            className={classNames(
              styles.bootPageSection,
              'animate__fadeInDown',
              'animate__animated',
              'duration-500ms',
            )}
            style={{
              width: `${ scale < 1 ? 1280 : Math.ceil(1280 * scale)}px`,
            }}
          >
            <ul
              className={classNames(styles.bootPageUl, 'animate__animated')}
              style={{
                transform: `scale(${scale})`,
                left: '300px',
                bottom: '105px',
                opacity: 1,
              }}
            >
              {renderIndustr}
            </ul>
          </section>
          <Space className={styles.abs}>
            <Spin spinning={loadding} size="large" />
          </Space>
        </div>
        {hasRole ? (
          <div className={styles.cloudMonitorBtns}>
            <div
              className="cloud-using-anaylysis-btn"
              onClick={toOMSUsingAnalysis}
            >
              <img src={usingIcon} alt="" title="点击查看平台使用监控" />
              <span>平台使用分析</span>
            </div>
          </div>
        ) : null}
      </div>
    </SecurityLayout>
  );
};
const mapStateToProps = state => ({
  global: state.getIn(['global', 'globalConfig']),
  instance: state.getIn(['global', 'instance']),
});
const mapDispatchToProps = dispatch => ({
  updateConfig(config) {
    dispatch(actionCreators.getConfig(config));
  },
  createContext(data) {
    dispatch(actionCreators.createContext(data));
  },
  updateCurrentIndex(index) {
    dispatch(actionCreators.updateCurrentIndex(index));
  },
});
export default connect(
  mapStateToProps,
  mapDispatchToProps,
)(BootPage);
