import { NavMenuPortal } from '@tidbcloud/uikit/biz'
import { observer } from 'mobx-react'

import { NavItemProps, NavMenu } from 'dbaas/layouts/v5/SideNavbar/components/NavMenu'
import { eventTracking } from 'dbaas/utils/tracking'

import { useAdminNavList } from '../../helpers'

const getNavList = (navList: NavItemProps[]) => {
  return navList.map((nav) => ({
    ...nav,
    onClick: () =>
      eventTracking(`${nav.label} Nav Clicked`, {
        source: 'Project Admin - Navbar'
      }),
    children: nav.children ? getNavList(nav.children) : undefined
  }))
}

export const AdminNavMenu = observer(() => {
  const enabledNavList = useAdminNavList()
  const finalNavList = getNavList(enabledNavList)

  return (
    <NavMenuPortal>
      <NavMenu navList={finalNavList} defaultOpenedSub={true} />
    </NavMenuPortal>
  )
})