import { Box } from '../box'
import { useStyleConfig, vui, VuiComponent } from '../core'
import List from '../list'
import { PopoverContent } from '../popover'
import { cs } from '../utils'
import { useMenuContext } from './context'
import { MenuListProps } from './menu.types'

/** Displays a list of menu items in a popover content element. */
export const MenuList = vui<'ul', MenuListProps>((props, ref) => {
  const { className, contentProps, contentRef, maxH, slotTop, slotBottom, ...rest } = props

  const styles = useStyleConfig('Menu', useMenuContext())

  return (
    <PopoverContent borderRadius={0} ref={contentRef} {...contentProps}>
      <Box flexDirection="column">
        {slotTop}
        <List
          className={cs('vui-menuList', className)}
          isInteractive
          py={1}
          ref={ref}
          w="100%"
          {...styles.list}
          {...rest}
          maxH={maxH}
        />
        {slotBottom}
      </Box>
    </PopoverContent>
  )
}) as VuiComponent<'ul', MenuListProps> & {
  Divider: typeof List.Divider
  Heading: typeof List.Heading
  Icon: typeof List.Icon
  Item: typeof List.Item
  Text: typeof List.Text
}

MenuList.Divider = List.Divider
MenuList.Heading = List.Heading
MenuList.Icon = List.Icon
MenuList.Item = List.Item
MenuList.Text = List.Text

MenuList.displayName = 'MenuList'

export default MenuList
