import { NavLink } from 'react-router'
import { ActionButton } from '@react-spectrum/s2/ActionButton'
import { Menu, MenuItem, MenuTrigger, SubmenuTrigger, Text } from '@react-spectrum/s2/Menu'
import { Tooltip, TooltipTrigger } from '@react-spectrum/s2/Tooltip'
import { menuItems, type NavigationItem } from '../route-config'
import iconStyles from './menu-icon.module.css'
import styles from './layout-basic.module.css'

function containsPage(item: NavigationItem, pageId?: string): boolean {
  return item.id === pageId || !!item.children?.some((child) => containsPage(child, pageId))
}

function renderMenuItem(item: NavigationItem) {
  const Icon = item.Icon
  const content = <>{Icon && <Icon />}<Text>{item.title}</Text></>

  return item.children ? (
    <SubmenuTrigger key={item.id}>
      <MenuItem id={item.id} textValue={item.title}>{content}</MenuItem>
      <Menu aria-label={item.title}>{item.children.map(renderMenuItem)}</Menu>
    </SubmenuTrigger>
  ) : (
    <MenuItem key={item.id} id={item.id} href={item.path} textValue={item.title}>{content}</MenuItem>
  )
}

function CollapsedNavigation({ activePageId }: { activePageId?: string }) {
  return (
    <div className={styles.iconNavigation}>
      {menuItems.map((item) => {
        const Icon = item.Icon
        const icon = Icon ? <Icon UNSAFE_className={iconStyles.icon} /> : item.title.slice(0, 1)

        return item.children ? (
          <div key={item.id} className={`${styles.iconNavigationGroup}${containsPage(item, activePageId) ? ` ${styles.isActive}` : ''}`}>
            <MenuTrigger direction="right" align="start">
              <TooltipTrigger placement="right">
                <ActionButton aria-label={item.title} isQuiet>{icon}</ActionButton>
                <Tooltip>{item.title}</Tooltip>
              </TooltipTrigger>
              <Menu aria-label={item.title}>{item.children.map(renderMenuItem)}</Menu>
            </MenuTrigger>
          </div>
        ) : (
          <NavLink key={item.id} className={styles.iconNavigationLink} to={item.path} end aria-label={item.title} title={item.title}>
            {icon}
          </NavLink>
        )
      })}
    </div>
  )
}

export default CollapsedNavigation