import type { ReactNode } from 'react';
import React from 'react';
import type { AriaPopoverProps } from 'react-aria';

import type { MenuProps as CoreMenuProps, MenuTriggerProps as CoreMenuTriggerProps } from '@shoptet/ui-core-web';
import { Menu as CoreMenu } from '@shoptet/ui-core-web';
import type { Complete, Exact, SafePick } from '@shoptet/utils';
import { destruct } from '@shoptet/utils';

import { MenuContext } from './MenuContext';
import { MenuDivider } from './MenuDivider';
import { MenuItem } from './MenuItem';
import type { MenuListProps } from './MenuList';
import { MenuList } from './MenuList';
import { MenuSubmenu } from './MenuSubmenu';

export type { MenuItemProps } from './MenuItem';

export interface MenuInheritedCoreMenuProps extends SafePick<
  CoreMenuProps,
  'open' | 'defaultOpen' | 'onOpenChange' | 'disabled'
> {}

export interface MenuProps extends MenuInheritedCoreMenuProps, MenuListProps {
  trigger: (args: Parameters<CoreMenuTriggerProps['children']>[0]) => ReactNode;
  placement?: AriaPopoverProps['placement'];
  compact?: boolean;
}

export const Menu = Object.assign(
  function Menu({ trigger, placement, compact, ...rest }: MenuProps) {
    const [menuOpenProps, menuProps] = destruct(rest, ['open', 'defaultOpen', 'onOpenChange', 'disabled']);

    menuOpenProps satisfies Exact<Complete<MenuInheritedCoreMenuProps>, typeof menuOpenProps>;
    menuProps satisfies Exact<Complete<MenuListProps>, typeof menuProps>;

    return (
      <MenuContext.Provider value={{ compact: compact ?? false }}>
        <CoreMenu {...menuOpenProps}>
          <CoreMenu.Trigger>{triggerArgs => trigger(triggerArgs)}</CoreMenu.Trigger>
          <CoreMenu.Popover
            className={
              compact
                ? 'menu__popover menu__popover--compact popover--elevation-medium'
                : 'menu__popover popover--elevation-medium'
            }
            offset={0}
            placement={placement}
          >
            <MenuList {...menuProps} />
          </CoreMenu.Popover>
        </CoreMenu>
      </MenuContext.Provider>
    );
  },
  {
    Item: MenuItem,
    Divider: MenuDivider,
    Submenu: MenuSubmenu,
  }
);