import { Link, useModel } from '@umijs/max';
import React from 'react';
// import { Card } from 'antd';
import './index.less';
import { Breadcrumb, Space } from 'antd';
import { iconFront } from './iconfont';
// import routes from './../../../config/routes';

const PageHeader: React.FC = () => {
  const location = window.location;

  // const intl = useIntl();
  const masterProps = useModel('@@qiankunStateFromMaster');
  const { menuData } = masterProps.globalState;

  //查找 menuData tree 中 所有type 为page 的节点
  // const findPageNode = (tree: any) => {
  //   const pageNode: any = [];
  //   tree.forEach((item: any) => {
  //     if (item.menuType === 'page') {
  //       pageNode.push(item);
  //     } else if (item.menuType === 'group' && item.routes) {
  //       pageNode.push(...findPageNode(item.routes));
  //     }
  //   });
  //   return pageNode;
  // };

  // const getPageTitleText = () => {
  //   const pathname = location.pathname;
  //   const pageNode = findPageNode(menuData).find(
  //     (item: any) => item.path === pathname,
  //   );

  //   // 替换所有location.pathname 的/ 变更为.
  //   const key = pathname.replace(/\//g, '.');
  //   return pageNode?.name || intl.formatMessage({ id: `menu${key}`, defaultMessage:'-' });
  // };

  const getMenuItems = () => {
    const pathname = location.pathname.split('/');
    const menuNode = menuData.find(
      (item: any) => item.path.includes(pathname[1]),
    );

    if (menuNode.menuType === 'page') {
      return [
        {
          title: menuNode.name,
          href: menuNode.path,
        },
      ];
    }
    if (menuNode.menuType === 'group') {
      const pageNode = menuNode.routes.find((item: any) => item.path.includes(pathname[2]));
      return [
        {
          title: <Space>
            <span>{iconFront[menuNode.icon]}</span>
            <span>{menuNode.name}</span>
          </Space>,
          menu: {
            items: menuNode.routes.map((item: {
              access: string,
              path: string,
              name: string
            }) => ({
              key: item.access,
              label: (<Link to={`${item.path.replace(menuNode.path, '')}`}>{item.name}</Link>)
            }))
          }
        }, {
          title: pageNode.name,
        }
      ];
    }

    // console.log(pageNode, pathname);
    return [];
  };

  return <div className="page-header">
    <Breadcrumb
      items={getMenuItems()}
    />

    {/* {getPageTitleText()} */}
  </div>;
};
export default PageHeader;