import iconStyles from './menu-icon.module.css'
import { useMatches } from 'react-router'
import { SideNav, SideNavItem, SideNavItemContent, SideNavItemLink, Text } from '@react-spectrum/s2/SideNav'
import { defaultExpandedKeys, menuItems, type NavigationItem, type PageMetadata } from '../route-config'

function renderItem(item: NavigationItem, level = 0) {
  const Icon = item.Icon
  const content = (
    <>
      {Icon && <Icon UNSAFE_className={level === 0 ? iconStyles.icon : undefined} />}
      <Text>{item.title}</Text>
    </>
  )

  return (
    <SideNavItem key={item.id} id={item.id} href={item.path} textValue={item.title}>
      <SideNavItemContent>
        {item.path ? <SideNavItemLink>{content}</SideNavItemLink> : content}
      </SideNavItemContent>
      {item.children?.map((child) => renderItem(child, level + 1))}
    </SideNavItem>
  )
}

function SidebarMenu() {
  const currentPage = useMatches().at(-1)?.handle as PageMetadata | undefined

  return (
    <SideNav aria-label="Pages" selectedRoute={currentPage?.path ?? null} defaultExpandedKeys={defaultExpandedKeys}>
      {menuItems.map((item) => renderItem(item))}
    </SideNav>
  )
}

export default SidebarMenu