import React, { useEffect, useState, memo } from 'react';
import { LeftOutlined } from '@ant-design/icons';
import { Space, Menu } from 'antd';
import { Link, useLocation, useNavigate } from 'react-router-dom';
import { findTreeElementByKey } from '@/utils/common.js';

import IconFont from '@/common/iconfont';

const UserMenu = (props) => {
  const { flag, breadmenu, menuList } = props;
  const location = useLocation();
  const [selectedKeys, setSelectedKeys] = useState([]);

  const transLinkComponent = (route, bool) => {
    return bool ? <span>{route.meta.title}</span> : <Link to={route.path}>{route.meta.title}</Link>;
    {
      /* <span onClick={() => navigatorTo(route)}>{ route.meta.title }</span> */
    }
  };

  const generateMenuItems = (routes, children = 'children') => {
    return routes.reduce((menuItems, route) => {
      if (route.hidden) {
        return menuItems;
      }

      let menuItem = null;
      menuItem = {
        title: route.meta.title,
        key: route.path,
        icon: route.icon ? <IconFont type={route.icon} /> : null,
      };
      if (route[children] && route[children].length > 0) {
        const childrenItems = generateMenuItems(route.children);
        if (childrenItems.length > 0) {
          menuItem[children] = childrenItems;
          menuItem.label = transLinkComponent(route, true);
        } else {
          menuItem.label = transLinkComponent(route);
        }
      } else {
        menuItem.label = transLinkComponent(route);
      }

      return [...menuItems, menuItem];
    }, []);
  };

  // 设置默认高亮
  useEffect(() => {
    const selectKeysItems = location.pathname.split('/');
    if (breadmenu) {
      // selectKeysItems.shift();
      // if (selectKeysItems.length >=3) selectKeysItems.pop();
      const lightMenu = selectKeysItems.slice(0, 3);

      // const selectPath = selectKeysItems.map(item => `/${item}`);
      setSelectedKeys(lightMenu.join('/'));
    } else {
      // selectKeysItems.shift();
      // const selectPath = selectKeysItems.map(item => `/${item}`);
      const lightMenu = selectKeysItems.slice(0, 2);
      setSelectedKeys(lightMenu.join('/'));
      // setSelectedKeys(selectPath);
    }
  }, [location.pathname]);

  const [newMenus, setNewMenus] = useState([]);
  const transLinkMenu = (route, bool) => {
    return bool ? <span>{route.title}</span> : <Link to={route.path}>{route.title}</Link>;
  };
  const toAntdMenus = (menus, depth = 1) => {
    return menus.map((item) => {
      const newItem = {
        label: depth === 1 ? transLinkMenu(item, true) : transLinkMenu(item),
        key: item.path,
        icon: item.icon ? <IconFont type={route.icon} /> : null,
      };
      if (depth < 2 && item.children.length) {
        newItem.children = toAntdMenus(item.children, depth + 1);
      }
      return newItem;
    });
  };
  useEffect(() => {
    if (menuList && menuList.length) {
      const newMenusArr = toAntdMenus(menuList);
      setNewMenus(newMenusArr);
    }
  }, [menuList]);

  return (
    <div className='header-menu'>
      <Menu
        items={newMenus}
        mode='horizontal'
        selectedKeys={selectedKeys}
        style={{ border: 'none' }}
        builtinPlacements={{
          bottomLeft: {
            points: ['tc', 'bc'], // 子菜单的 "上中" 和 对应菜单的title "下中" 对齐。
            overflow: {
              adjustX: 10,
              adjustY: 10,
            },
            offset: [0, 3], //让下拉菜单位移
          },
        }}
      >
        <Menu.Item key='leftIcon' icon={<LeftOutlined />} />
        {newMenus.map((menuItem) => (
          <Menu.Item key={menuItem.key} icon={menuItem.icon}>
            {menuItem.label}
          </Menu.Item>
        ))}
      </Menu>
    </div>
  );
};

export default memo(UserMenu);
