import { Menu } from 'antd'
import { useNavigate } from 'react-router-dom';
import menus from './menu';


export default function Sider() {
  const navigate = useNavigate()
  const items1 = setMenus(menus)
  function setMenus(menu = []) {
    let allMenu = []
    for(let i = 0; i < menu.length; i++) {
      const curr = menu[i]
      let item
      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>
  )
}