import type { MenuProps } from 'antd';
import { Menu } from 'antd'
import { useNavigate } from 'react-router-dom';
import menus from './menu';
interface MenuItemLocal {
  label: string,
  icon?: any,
  url?: string,
  children?: MenuItemLocal[],
  [prop: string]: any
}

export default function Sider() {
  const navigate = useNavigate()
  type MenuItem = Required<MenuProps>['items'][number]
  const items1: MenuProps['items'] = setMenus(menus)
  function setMenus(menu: MenuItemLocal[] = []) {
    let allMenu: MenuItem[] = []
    for(let i = 0; i < menu.length; i++) {
      const curr = menu[i]
      let item: MenuItem
      if(curr.children?.length) {
        item = {
          key: curr.label,
          label: curr.label,
          children: []
        }
        item.children = setMenus(curr.children)
      } else {
        item = {
          key: curr.label,
          label: curr.label,
          onClick: () => {
            navigate(curr.url || '/')
          }
        }
      }
      curr.icon && (item.icon = curr.icon)
      allMenu.push(item)
    }
    return allMenu
  }

  return (
    <div style={{
      width: 220,
      height: "calc(100vh - 60px)",
      backgroundColor: "#1a1341",
      overflow: "auto"
    }}>
      <Menu mode="inline" theme='dark' items={items1}></Menu>
    </div>
  )
}