import type { ComponentType } from 'react'
import type { RouteObject } from 'react-router'
import HomeIcon from '@react-spectrum/s2/icons/Home'
import InfoCircleIcon from '@react-spectrum/s2/icons/InfoCircle'
import HelpCircleIcon from '@react-spectrum/s2/icons/HelpCircle'
import EditIcon from '@react-spectrum/s2/icons/Edit'
import AppsIcon from '@react-spectrum/s2/icons/Apps'
import Home from './page-home'
import About from './page-about'
import NotFound from './page-not-found'
import FormPage from './page-form'
import UIKitPage from './page-ui-kit'

interface ItemMetadata {
  id: string
  title: string
  Icon?: typeof HomeIcon
  hidden?: boolean
}

interface PageConfig extends ItemMetadata {
  path: string
  Component: ComponentType
  children?: never
}

interface GroupConfig extends ItemMetadata {
  children: NavigationItem[]
  defaultExpanded?: boolean
  path?: never
  Component?: never
}

export type NavigationItem = PageConfig | GroupConfig

export interface PageMetadata {
  id: string
  title: string
  path: string
}

// Menu groups organize navigation; page paths are absolute and independent of groups.
export const routeConfig: NavigationItem[] = [
  { id: 'home', title: 'Home', path: '/', Icon: HomeIcon, Component: Home },
  { id: 'form', title: '表单', path: '/form', Icon: EditIcon, Component: FormPage },
  { id: 'ui-kit', title: 'UI Kit', path: '/ui-kit', Icon: AppsIcon, Component: UIKitPage },
  {
    id: 'help',
    title: 'Help',
    Icon: HelpCircleIcon,
    defaultExpanded: true,
    children: [
      { id: 'about', title: 'About', path: '/about', Icon: InfoCircleIcon, Component: About },
    ],
  },
  { id: 'not-found', title: 'Page not found', path: '*', Component: NotFound, hidden: true },
]

function createPageRoutes(items: NavigationItem[]): RouteObject[] {
  return items.flatMap((item): RouteObject[] => {
    if (item.children) return createPageRoutes(item.children)
    const handle: PageMetadata = { id: item.id, title: item.title, path: item.path }
    return [{ id: item.id, path: item.path, Component: item.Component, handle }]
  })
}

function createMenuItems(items: NavigationItem[]): NavigationItem[] {
  return items.filter((item) => !item.hidden).map((item) =>
    item.children ? { ...item, children: createMenuItems(item.children) } : item,
  )
}

function getExpandedKeys(items: NavigationItem[]): string[] {
  return items.flatMap((item) => item.children
    ? [...(item.defaultExpanded ? [item.id] : []), ...getExpandedKeys(item.children)]
    : [],
  )
}

export const pageRoutes = createPageRoutes(routeConfig)
export const menuItems = createMenuItems(routeConfig)
export const defaultExpandedKeys = getExpandedKeys(menuItems)