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

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

import { actionCreators } from '../../containers/App/store';
import SecurityLayout from '../../layouts/SecurityLayout';
import LoginAction from '../user/login/login';
import styles from './index.less';

const industries = ['供水', '排水', '消防', '暖通', '节水', '实验室'];
const renderIndustries = (config, callback) => {
  return industries.map(item => {
    return (
      <li
        className={styles.bootPageLi}
        key={item}
        onClick={event => callback(event, item)}
      >
        <div className={styles.bootPageList}>
          <div className={styles.listMain}>
            <img
              src={`https://panda-water.cn/web4/assets/images/bootPage/${item}.png`}
            />
            <span>{item}</span>
          </div>
        </div>
      </li>
    );
  });
};
const BootPage = props => {
  const [loadding, setLoadding] = useState(false);
  const handlePage = useCallback((event, type) => {
    event.persist();
    setLoadding(true);
    const config = props.global;
    let loginAction = new LoginAction(props);
    config.uiwidgets = [];
    config.widgets = [];
    config.allWidgets = [];
    props.instance && props.instance.updateConfig(config);
    // props.instance && props.instance.getUserInfoAndConfig('', true, type);
    loginAction.getUserInfoAndConfig('', true, type);

    loginAction.events.on('toggleIndustry', event => {
      setLoadding(false);
      props.history.push(`/?client=${props.global.client}`);
      window.share.event.emit('triggerMicro', props.global);
      location.reload();
    });
  }, []);
  return (
    <SecurityLayout>
      <div className={styles.bootPage}>
        <div className={styles.bootPageMain}>
          <header className={styles.bootPageHead}>
            <img src="https://panda-water.cn/web4/assets/images/bootPage/熊猫图标.png" />
            <div className={styles.bootPageTitle}>
              <span className={styles.bootPageZh}>
                熊猫智慧城市监控管理解决方案
              </span>
              <span className={styles.bootPageEn}>
                Panda Smart City Monitoring Management Platform & Solution
              </span>
            </div>
          </header>
          <section
            className={classNames(
              styles.bootPageSection,
              'animate__fadeInDown',
              'animate__animated',
            )}
          >
            <ul
              className={classNames(styles.bootPageUl, 'animate__animated')}
              style={{
                transform: `scale(${window.screen.width / 1920})`,
                left: '300px',
                bottom: '105px',
                opacity: 1,
              }}
            >
              {renderIndustries(props.global, handlePage)}
            </ul>
          </section>
          <Space className={styles.abs}>
            <Spin spinning={loadding} size="large" />
          </Space>
        </div>
      </div>
    </SecurityLayout>
  );
};
const mapStateToProps = state => ({
  global: state.getIn(['global', 'globalConfig']),
  instance: state.getIn(['global', 'instance']),
});
const mapDispatchToProps = dispatch => {
  return {
    updateConfig(config) {
      dispatch(actionCreators.getConfig(config));
    },
    createContext(data) {
      dispatch(actionCreators.createContext(data));
    },
  };
};
export default connect(
  mapStateToProps,
  mapDispatchToProps,
)(BootPage);
