import { type ReactNode } from 'react'
import {
	Button as AriaButton,
	Menu as AriaMenu,
	MenuItem,
	MenuTrigger,
	Popover
} from 'react-aria-components'

import { cn } from '~/utils/cn'

function Button(properties: Parameters<typeof AriaButton>[0]) {
	return (
		<AriaButton
			{...properties}
			className={cn(
				'outline-none',
				properties.className
			)}
			aria-label='Menu'
		/>
	)
}

function Items(properties: Parameters<typeof AriaMenu>[0]) {
	return (
		<Popover className={cn(
			'mt-2 rounded-md',
			'bg-ui-50 dark:bg-ui-800',
			'overflow-hidden z-50',
			'border border-ui-200 dark:border-ui-600',
			'entering:animate-in exiting:animate-out',
			'entering:fade-in entering:zoom-in-95',
			'exiting:fade-out exiting:zoom-out-95',
			'fill-mode-forwards origin-left-right'
		)}
		>
			<AriaMenu
				{...properties}
				className={cn(
					'outline-none',
					'divide-y divide-ui-200 dark:divide-ui-600',
					properties.className
				)}
			>
				{properties.children}
			</AriaMenu>
		</Popover>
	)
}

function Item(properties: Parameters<typeof MenuItem>[0]) {
	return (
		<MenuItem
			{...properties}
			className={cn(
				'px-4 py-2 w-full outline-none',
				'hover:bg-ui-200 dark:hover:bg-ui-700',
				properties.className
			)}
		/>
	)
}

function Menu({ children }: { readonly children: ReactNode }) {
	return (
		<MenuTrigger>
			{children}
		</MenuTrigger>
	)
}

export default Object.assign(Menu, { Button, Item, Items })