// Page: Benevole
export const initBenevolePage = () => {
  console.debug('[page:benevole] init');

  const modal = document.getElementById('devenir-benevole');
  if (!modal) {
    return;
  }

  const openButtons = Array.from(
    document.querySelectorAll<HTMLAnchorElement>('a[href="#devenir-benevole"]')
  );
  const closeTriggers = Array.from(
    modal.querySelectorAll<HTMLElement>('[data-benevole-modal-close]')
  );

  const openModal = () => {
    modal.classList.add('is-open');
    modal.setAttribute('aria-hidden', 'false');
    document.body.classList.add('partner-modal-open');
  };

  const closeModal = () => {
    modal.classList.remove('is-open');
    modal.setAttribute('aria-hidden', 'true');
    document.body.classList.remove('partner-modal-open');
  };

  openButtons.forEach((btn) => {
    btn.addEventListener('click', (event) => {
      event.preventDefault();
      openModal();
    });
  });

  closeTriggers.forEach((el) => {
    el.addEventListener('click', (event) => {
      event.preventDefault();
      closeModal();
    });
  });

  document.addEventListener('keydown', (event: KeyboardEvent) => {
    if (event.key === 'Escape' || event.key === 'Esc') {
      if (modal.classList.contains('is-open')) {
        closeModal();
      }
    }
  });
};

if (document.readyState === 'loading') {
  document.addEventListener('DOMContentLoaded', () => initBenevolePage());
} else {
  initBenevolePage();
}