import { RefObject } from 'react';

export const useAccessibleMenuToggle = () => {
  return ({
      menuRef,
      onToggle,
      isOpen,
    }: {
      menuRef: RefObject<any>;
      onToggle: () => void;
      isOpen: boolean;
    }) =>
    (e: KeyboardEvent) => {
      let shouldPreventPropagation = true;
      if (e.key === 'Enter') {
        onToggle();
      } else if (e.key === 'Tab' && isOpen) {
        const firstFocusElement = menuRef.current?.querySelectorAll(
          '[tabindex]:not([tabindex="-1"]'
        );
        if (firstFocusElement && firstFocusElement[0]) {
          (firstFocusElement[0] as HTMLDivElement).focus();
        }
      } else if (e.key === 'Escape' && isOpen) {
        onToggle();
      } else {
        shouldPreventPropagation = false;
      }
      if (shouldPreventPropagation) {
        e.stopPropagation();
        e.preventDefault();
      }
    };
};