import { useMemo } from 'react'

import { Popover } from '../popover'
import { filterUndefined } from '../utils'
import { MenuProvider } from './context'
import { MenuProps } from './menu.types'
import MenuButton from './menuButton'
import MenuItem from './menuItem'
import MenuList from './menuList'

/** Wraps Popover component and exposes some props to the children via context. */
export function Menu(props: MenuProps) {
  const { closeOnSelect = true, size, variant, ...rest } = props

  const context = useMemo(() => filterUndefined({ closeOnSelect, size, variant }), [closeOnSelect, size, variant])

  return (
    <MenuProvider value={context}>
      <Popover {...rest} />
    </MenuProvider>
  )
}

Menu.Button = MenuButton
Menu.Item = MenuItem
Menu.List = MenuList
Menu.displayName = 'Menu'

export default Menu
