import {MenuDataItem} from '@ant-design/pro-components';
import {getMatchMenu} from '@umijs/route-utils';
import {Layout, Menu} from 'antd';
import {MenuItemType} from 'antd/es/menu/interface';
import React from 'react';
import useButtonStyle from './style.style';

interface ILeftMenuProps {
  menuData: MenuDataItem[];
  pathname: string;
  onClick: (item: MenuItemType) => void;
}

// 递归 menuData tree 树状结构 增加 label 参数
const notNullArray = (value: any[]) => Array.isArray(value) && value.length > 0;

/**
 * 删除 hideInMenu 和 item.name 不存在的
 */
const defaultFilterMenuData = (menuData: MenuDataItem[] = []): MenuItemType[] =>
  menuData
    .filter(
      (item) =>
        item &&
        (item.name || notNullArray(item.children as MenuItemType[])) &&
        !item.hideInMenu,
    )
    .map((item) => {
      const newItem = { ...item };
      const routerChildren = newItem.children || [];
      delete newItem.children;

      if (
        notNullArray(routerChildren) &&
        !newItem.hideInMenu &&
        routerChildren.some((child) => child && !!child.name)
      ) {
        const newChildren = defaultFilterMenuData(routerChildren);
        if (newChildren.length)
          return {
            key: item.key,
            label: item.name,
            name: item.name,
            path: item.path,
            children: newChildren,
            // type: 'group',
          } as unknown as MenuItemType;
      }
      return {
        key: newItem.key,
        label: newItem.name,
        name: item.name,
        path: newItem.path,
      } as MenuItemType;
    })
    .filter((item) => item);

const LeftMenu: React.FC<ILeftMenuProps> = (props) => {
  const { styles } = useButtonStyle();
  const { pathname, menuData, onClick } = props;

  if (!menuData) {
    return null;
  }

  // 根据提供的 menuData 提供的 tree 结构，获取第一层等级菜单
  // moduleMenu
  const moduleMenu = menuData.map((item: MenuDataItem) => {
    return {
      key: item.key,
      label: item.name,
      path: item.path,
    } as MenuItemType;
  });

  // 通过循环 moduleMenu 判断 history.location.pathname 是否包含 key
  const activeMenu = getMatchMenu(pathname, menuData, true);
  // pluck activeMenu key
  const activeMenuKey = activeMenu.map(
    (item: MenuDataItem) => item.key as string,
  );
  const openKeys = activeMenu.flatMap((item: MenuDataItem) => item.children).map(
    (item: any) => item?.key as string,
  );

  let subMenu: MenuItemType[] = [];
  if (activeMenu[0]?.children) {
    subMenu = defaultFilterMenuData(activeMenu[0]?.children);
  }

  return (
    <>
      <div
        className={styles.box}
        style={{
          // @ts-ignore
          '--box-with': subMenu.length > 0 ? '248px' : '100px',
        }}
      ></div>
      <Layout.Sider
        className={styles.sider}
        style={{ position: 'fixed' }}
        width={'auto'}
        theme={'light'}
      >
        <Menu
          items={moduleMenu}
          className={styles.moduleMenu}
          selectedKeys={activeMenuKey}
          theme={'dark'}
          onClick={(item) => {
            onClick(item);
          }}
        />
        {subMenu.length > 0 && (
          <Menu
            items={subMenu}
            className={styles.subMenu}
            selectedKeys={activeMenuKey}
            openKeys={openKeys}
            mode="inline"
            inlineIndent={12}
            onClick={(item) => {
              onClick(item);
            }}
          />
        )}
      </Layout.Sider>
    </>
  );
};

export default LeftMenu;
