import { useMemo } from 'react';

/**
 * Hook to configure the correct event listeners to attach to a tooltip trigger
 * based on the screen size. On mobile we listen for click events to show or
 * hide the drawer display and on desktop we listen for mouse enter and leave
 * events to show or hide the hover display.
 */
const useTooltipEvents = function useTooltipEvents(opts = {}) {
  const {
    breakpoint,
    tooltip,
    ...activateProps
  } = opts;
  return useMemo(() => {
    if (!tooltip) return {};
    const {
      isDesktop
    } = tooltip.config;
    const {
      activate: activateTooltip,
      deactivate
    } = tooltip.trigger;
    const activate = () => activateTooltip(activateProps);
    if (isDesktop) {
      return {
        tabIndex: 0,
        onClick: activate,
        onFocus: activate,
        onMouseEnter: activate,
        onBlur: deactivate,
        onMouseLeave: deactivate
      };
    }
    return {
      onClick: () => {
        activate();
        setTimeout(activate, 100);
      }
    };
  }, [tooltip]);
};
export default useTooltipEvents;