import { useEffect } from 'react';

type KeyboardHost = typeof globalThis & {
  addEventListener?: (
    type: 'keydown',
    listener: (event: KeyboardEvent) => void,
  ) => void;
  removeEventListener?: (
    type: 'keydown',
    listener: (event: KeyboardEvent) => void,
  ) => void;
};

const keyboardHost = globalThis as KeyboardHost;

export function useEscapeKey(onEscape: () => void) {
  useEffect(() => {
    if (
      keyboardHost.addEventListener == null ||
      keyboardHost.removeEventListener == null
    ) {
      return undefined;
    }

    function handleKeyDown(event: KeyboardEvent) {
      if (event.key === 'Escape') {
        onEscape();
      }
    }

    keyboardHost.addEventListener('keydown', handleKeyDown);

    return () => {
      keyboardHost.removeEventListener?.('keydown', handleKeyDown);
    };
  }, [onEscape]);
}