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

import type { MenuState } from '@shoptet/ui-core-web';
import { Menu as CoreMenu } from '@shoptet/ui-core-web';

import { useMenuContext } from './MenuContext';
import { MenuList } from './MenuList';

export interface MenuSubmenuProps {
  children?: ReactNode;
  trigger: (args: { state: { open: boolean } }) => ReactNode;
  placement?: AriaPopoverProps['placement'];
  offset?: number;
  crossOffset?: number;
}

export function MenuSubmenu({
  trigger,
  placement = 'right top',
  offset = 0,
  crossOffset = 0,
  children,
  ...rest
}: MenuSubmenuProps) {
  rest satisfies Record<PropertyKey, never>;
  const { compact } = useMenuContext();

  return (
    <CoreMenu.Submenu>
      <CoreMenu.Submenu.Trigger>{({ state }: { state: MenuState }) => trigger({ state })}</CoreMenu.Submenu.Trigger>
      <CoreMenu.Popover
        className={
          compact
            ? 'menu__popover menu__popover--submenu menu__popover--compact popover--elevation-medium'
            : 'menu__popover menu__popover--submenu popover--elevation-medium'
        }
        placement={placement}
        offset={offset}
        crossOffset={crossOffset}
      >
        <MenuList>{children}</MenuList>
      </CoreMenu.Popover>
    </CoreMenu.Submenu>
  );
}