import React from 'react';
import { OverlayTriggerStateContext, Popover, RootMenuTriggerStateContext } from 'react-aria-components';
import classNames from 'classnames';

import { useExitAnimation } from '../../../hooks/useAnimation';

import { DropdownButtonModalMenuContext } from './DropdownButtonModalMenuContext';
import { DropdownButtonModalSubmenuHeader } from './DropdownButtonModalSubmenuHeader';

interface DropdownButtonModalSubmenuProps extends React.PropsWithChildren {
  label: string;
}

export const DropdownButtonModalSubmenu: React.FC<DropdownButtonModalSubmenuProps> = ({ children, label, ...rest }) => {
  const overLayState = React.useContext(OverlayTriggerStateContext);
  const rootMenuState = React.useContext(RootMenuTriggerStateContext);

  const menuRef = React.useRef<HTMLDivElement>(null);
  const isExiting = useExitAnimation(menuRef, rootMenuState?.isOpen ?? false);

  const { modalRef } = React.useContext(DropdownButtonModalMenuContext);

  return (
    <Popover
      {...rest}
      ref={menuRef}
      isExiting={isExiting}
      isOpen={overLayState?.isOpen}
      onOpenChange={overLayState?.setOpen}
      className={classNames('dropdownButton__modalSubmenu dropdownButton__modalSubmenu--popover', {
        'dropdownButton__modalSubmenu--fadeOut': isExiting,
      })}
      UNSTABLE_portalContainer={modalRef?.current ?? document.body}
    >
      <div className='dropdownButton__modalSubmenuInner'>
        <DropdownButtonModalSubmenuHeader label={label} />
        {children}
      </div>
    </Popover>
  );
};