/**
 * Ant Design Pro v4 use `@ant-design/pro-layout` to handle Layout.
 * You can view component api by:
 * https://github.com/ant-design/ant-design-pro-layout
 */
import ProLayout from '@ant-design/pro-layout';
import { Link, connect, useIntl, history } from 'umi';
import React from 'react';
import RightContent from '@/components/GlobalHeader/RightContent';
import AuthRouter from '@/components/Auth/AuthRouter';
import PageCommons from '@/components/PageCommons';
import YH from '@/assets/yh-logo.png';
import {
  DesktopOutlined,
  WarningOutlined,
  SelectOutlined,
  BarsOutlined,
  SettingOutlined,
} from '@ant-design/icons';
import { StyledTitle } from '@/components/style';
import { codeMappingForResource } from '../../config/routerConfig';

const IconMap = {
  screen: <DesktopOutlined />,
  risk: <WarningOutlined />,
  event: <SelectOutlined />,
  data: <BarsOutlined />,
  system: <SettingOutlined />,
};

const BasicLayout = props => {
  const intl = useIntl();
  const { formatMessage } = intl;
  const {
    dispatch,
    children,
    settings,
    location: { pathname },
    loading,
    urlFileExport,
    currentUser: { menus },
  } = props;
  const handleMenuCollapse = payload => {
    if (dispatch) {
      dispatch({
        type: 'global/changeLayoutCollapsed',
        payload,
      });
    }
  };
  // 重定向处理
  // const isRedirect = pathname === '/';
  // if (isRedirect && dataMenus.length) {
  //   history.replace({ pathname: dataMenus[0].path });
  // };
  // 菜单 loop
  const loopMenuItem = menus => {
    // console.log(menus, 'menus', codeMappingForResource);
    return menus?.map(({ icon, children, ...item }) => ({
      ...(codeMappingForResource.get(item.resourceCode) || {}),
      icon: icon && IconMap[icon],
      routes: children && loopMenuItem(children),
    }));
  };

  return (
    <ProLayout
      formatMessage={formatMessage}
      menuHeaderRender={(logoDom, titleDom) => (
        <Link to="/">
          <img src={YH} />
          <StyledTitle>{titleDom}</StyledTitle>
        </Link>
      )}
      onCollapse={handleMenuCollapse}
      menuItemRender={(menuItemProps, defaultDom) => {
        if (menuItemProps.isUrl || menuItemProps.children || !menuItemProps.path) {
          return defaultDom;
        }
        return (
          <Link to={menuItemProps.path}>
            {IconMap[menuItemProps.icons]}
            {defaultDom}
          </Link>
        );
      }}
      subMenuItemRender={subProps => {
        return (
          <span className="ant-pro-menu-item">
            {IconMap[subProps.icons]}
            <span>{subProps.name}</span>
          </span>
        );
      }}
      menuDataRender={() => loopMenuItem(menus)}
      rightContentRender={() => <RightContent />}
      {...props}
      {...settings}
    >
      {/* 路由权限 */}
      <AuthRouter path={pathname}>{children}</AuthRouter>
      <PageCommons loading={loading} urlFileExport={urlFileExport} dispatch={dispatch} />
    </ProLayout>
  );
};

export default connect(({ global, settings, user }) => ({
  settings,
  loading: global.loading,
  collapsed: global.collapsed,
  urlFileExport: global.urlFileExport,
  currentUser: user.currentUser,
}))(BasicLayout);