import React from 'react';
import { Modal, ModalOverlay, RootMenuTriggerStateContext } from 'react-aria-components';
import classNames from 'classnames';

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

import { DropdownButtonModalMenuContext } from './DropdownButtonModalMenuContext';

export const DropdownButtonModalMenu: React.FC<React.PropsWithChildren> = ({ children, ...rest }) => {
  const rootMenuState = React.useContext(RootMenuTriggerStateContext);
  const { offset } = React.useContext(DropdownButtonContext);

  const modalRef = React.useRef<HTMLDivElement>(null);

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

  return (
    <ModalOverlay
      isDismissable
      isOpen={rootMenuState?.isOpen}
      isExiting={isExiting}
      onOpenChange={rootMenuState?.setOpen}
      className={classNames('dropdownButton__modalMenuOverlay dropdownButton__modalMenuOverlay--fadeIn', {
        'dropdownButton__modalMenuOverlay--fadeOut': isExiting,
      })}
      style={offset}
    >
      <Modal {...rest} ref={modalRef} className='dropdownButton__modalMenu dropdownButton__modalMenu--fadeIn'>
        <div
          ref={menuRef}
          className={classNames('dropdownButton__modalSubmenu', {
            'dropdownButton__modalSubmenu--fadeOut': isExiting,
          })}
        >
          <div className='dropdownButton__modalSubmenuInner'>
            <DropdownButtonModalMenuContext.Provider value={{ modalRef }}>
              {children}
            </DropdownButtonModalMenuContext.Provider>
          </div>
        </div>
      </Modal>
    </ModalOverlay>
  );
};