type ClickOnFader = (document: ShadowRoot, onClose: () => void) => void;

export const clickOnFader: ClickOnFader = (document, onClose) => {
  const modalOnceEl = document?.querySelector('.popup');
  if (!modalOnceEl) return;

  modalOnceEl.addEventListener('click', (e: Event) => {
    const event = e as MouseEvent;
    if (event.target === event.currentTarget) {
      onClose();
    }
  });
};

export const keyDownEscape = (onClose: () => void) => {
  const handleKeyDown = (event: KeyboardEvent) => {
    if (event.key === 'Escape') {
      onClose();
      keyClose();
    }
  };

  const keyOpen = () => {
    window.document.addEventListener('keydown', handleKeyDown);
  };
  const keyClose = () => {
    window.document.removeEventListener('keydown', handleKeyDown);
  };

  return {
    keyOpen,
    keyClose,
  };
};