import type { LucideIcon } from "lucide-preact";

export type MenuItemType = MenuTitle | MenuLink | MenuDivider

interface MenuItem {
  required_permission?: string
  conditions?: (((state: Infinity.Context) => boolean) | boolean)[]
}

interface MenuTitle extends MenuItem {
  type: "title"
  text: string
  children?: MenuItemType[]
}

interface MenuLink extends MenuItem {
  type: "link"
  href: string
  text: string
  icon?: LucideIcon
}

interface MenuDivider extends MenuItem {
  type: "divider"
}

export function MenuItem(item: MenuItemType) {
  switch(item.type) {
    case "link": return MenuLink(item);
    case "title": return MenuTitle(item);
    case "divider": return MenuDivider(item);
  }
}

export function MenuTitle(item: MenuTitle) {
  if(!item.children?.length) {
    return (
      <li className="menu-title">
        { item.text }
      </li>
    )
  } else {
    return (
      <li>
        <h2 className="menu-title">{ item.text }</h2>
        <ul>
          { item.children.map(MenuItem) }
        </ul>
      </li>
    )
  }
}

export function MenuLink(item: MenuLink) {
  return (
    <li>
      <a href={item.href}>
        {/* @ts-expect-error Lucide-Preact type issue - Working */}
        { item.icon && <item.icon width={16} /> }
        {item.text}
      </a>
    </li>
  );
}

export function MenuDivider(_item: MenuDivider) {
  return (
    <div className="divider" />
  );
}