let modal: HTMLElement | null = null;

function openModal(event: Event) {
  event.preventDefault();
  const el = document.querySelector((event.target as HTMLElement).getAttribute('href')!)! as HTMLElement;
  // @ts-expect-error reset
  el.style.display = null;
  el.removeAttribute('hidden');
  el.setAttribute('aria-modal', 'true');
  modal = el;
  modal.addEventListener('click', closeModal);
}

function closeModal(event: Event) {
  event.preventDefault();
  if (modal === null) {
    return;
  }
  modal.style.display = 'none';
  modal.setAttribute('hidden', 'hidden');
  modal.removeAttribute('aria-modal');
  modal.removeEventListener('click', closeModal);
  modal = null;
}

document.querySelectorAll('.open-modal').forEach((el) => {
  el.addEventListener('click', openModal);
});

window.addEventListener('keydown', (event) => {
  if (event.key === 'Escape' && modal !== null) {
    closeModal(event);
  }
});