/*
 * @Title:
 * @Author: hongmye
 * @Date: 2023-01-10 11:18:55
 */
import React, { useEffect, useMemo, useState, useRef } from 'react';
import { Empty, Spin, notification } from 'antd';
import SecurityLayout from '@/layouts/SecurityLayout';
import { appService } from '@/api';
import Cookies from 'js-cookie';
import _ from 'lodash';
import { useHistory, useAliveController } from '@wisdom-utils/runtime';
import { connect } from 'react-redux';
import { actionCreators } from '@/containers/App/store';

import { SERVICE_INTERFACE_SUCCESS_CODE } from '@/constants'; // 系统配置项名称
import { BootPageTemplate } from './template/constants';

const BootPage = props => {
  const [info, setInfo] = useState({
    first: true,
    loading: true,
    error: false,
  });
  const { clear } = useAliveController();
  const history = useHistory();
  const [template, setTemplate] = useState(window?.globalConfig?.displayMode || 'default');
  const RenderComponent = useMemo(() => {
    if (BootPageTemplate[template]) {
      return BootPageTemplate[template];
    }
    return BootPageTemplate.default;
  }, [template]);

  useEffect(() => {
    const tk = Cookies.get('token') || props.global.token;
    const isLogin = tk !== null && tk !== 'undefined' && tk !== void 0;
    let client = sessionStorage.getItem('client') || props?.global?.client || null;
    client = client !== 'undefined' && !_.isNull(client) && !_.isUndefined(client) ? client : 'city';
    const generateType = props.global && props.global.hasOwnProperty('get') ? props.global.get('generateType') : null;
    if (!isLogin) {
      history.push(`/user/login?client=${client}${generateType || ''}`, { reload: true });
      clear();
      props.logout();
    }
  }, [props]);
  useEffect(() => {
    appService
      .GetIntegratedloginSetting({
        ignoreSite: true,
      })
      .then(res => {
        const { code, data } = res;
        if (code !== SERVICE_INTERFACE_SUCCESS_CODE) {
          notification.error({ message: '提示', duration: 3, description: '系统引导页配置错误' });
          setInfo({ first: false, loading: false, error: true });
          return;
        }
        let displayMode = data?.displayMode || 'default';
        if (displayMode === '卡片' || displayMode === '地图') {
          displayMode = 'default';
        }
        props.updateIntegratedConfig(data || '');
        setTemplate(displayMode);
        setInfo({ first: false, loading: false, error: false });
      })
      .catch(err => {
        setInfo({ first: false, loading: false, error: true });
        props.updateIntegratedConfig('');
      });
  }, []);

  return (
    <SecurityLayout>
      {info.loading ? <Spin /> : info.error ? <Empty /> : <RenderComponent {...{ ...props }} />}
    </SecurityLayout>
  );
};
const mapStateToProps = state => ({
  global: state.getIn(['global', 'globalConfig']),
  instance: state.getIn(['global', 'instance']),
});
const mapDispatchToProps = dispatch => ({
  logout() {
    dispatch(actionCreators.logout());
  },
  updateIntegratedConfig(data) {
    dispatch(actionCreators.updateIntegratedConfig(data));
  },
});
export default connect(
  mapStateToProps,
  mapDispatchToProps,
)(BootPage);