import { useLayoutEffect } from './utils/react';
import { contains } from './utils/element';
import { makePriorityHook } from './usePriority';
import { Ref } from './types';

const usePriority = makePriorityHook();

export function useDialogDismiss<T extends HTMLElement>(
  ref: Ref<T>,
  onDismiss: () => void
) {
  const hasPriority = usePriority(ref);

  useLayoutEffect(() => {
    if (!hasPriority) return;

    function onKey(event: KeyboardEvent) {
      if (
        event.isComposing ||
        event.defaultPrevented ||
        event.code !== 'Escape'
      )
        return;
      event.preventDefault();
      onDismiss();
    }

    function onClick(event: MouseEvent | TouchEvent) {
      if (
        !ref.current ||
        contains(ref.current, event.target) ||
        event.defaultPrevented
      )
        return;
      event.preventDefault();
      onDismiss();
    }

    document.addEventListener('mousedown', onClick);
    document.addEventListener('touchstart', onClick);
    document.addEventListener('keydown', onKey);

    return () => {
      document.removeEventListener('mousedown', onClick);
      document.removeEventListener('touchstart', onClick);
      document.removeEventListener('keydown', onKey);
    };
  }, [ref, hasPriority, onDismiss]);
}