document.addEventListener('DOMContentLoaded', () => {
    // Functions to open and close a modal
    function openModal($el) {
      $el.classList.add('is-active');
    }
  
    function closeModal($el) {
      $el.classList.remove('is-active');
    }
  
    function closeAllModals() {
      (document.querySelectorAll('.modal') || []).forEach(($modal) => {
        closeModal($modal);
      });
    }
  
    // Add a click event on buttons to open a specific modal
    (document.querySelectorAll('.js-modal-trigger') || []).forEach(($trigger) => {
      const modal = $trigger.dataset.target;
      const $target = document.getElementById(modal);

      $trigger.addEventListener('click', () => {
        openModal($target);
      });
    });
  
    // Add a click event on various child elements to close the parent modal
    (document.querySelectorAll('.modal-background, .modal-close, .modal-card-head .delete, .modal-card-foot .button') || []).forEach(($close) => {
      const $target = $close.closest('.modal');
  
      $close.addEventListener('click', () => {
        closeModal($target);
      });
    });
  
    // Add a keyboard event to close all modals
    document.addEventListener('keydown', (event) => {
      if(event.key === "Escape") {
        closeAllModals();
      }
    });
});

function openModalFromTemplate() {
  const $target = document.getElementById('modal-article');
  $target.classList.add('is-active');
}

(document.querySelectorAll('.modal-background, .modal-close, .modal-card-head .delete, .modal-card-foot .button') || []).forEach(($close) => {
  const $target = $close.closest('.modal');

  $close.addEventListener('click', () => {
    closeModal($target);
  });
});

document.addEventListener('keydown', (event) => {
  if(event.key === "Escape") {
    closeAllModals();
  }
});

function closeModal($el) {
  $el.classList.remove('is-active');
}

function closeAllModals() {
  (document.querySelectorAll('.modal') || []).forEach(($modal) => {
    closeModal($modal);
  });
}

document.addEventListener('htmx:afterSwap', function(event) {
  if (event.detail.target.classList[0] === 'modal-request') {
    const articleTitre = document.querySelector('#article-titre');
    const articleChapeau = document.querySelector('#article-chapeau');
    const articleContenu = document.querySelector('#article-contenu');
    const articleCouverture = document.querySelector('#article-couverture');

    const response = JSON.parse(event.detail.xhr.response);
    document.querySelector('.modal-request').innerHTML = ''

    articleTitre.innerHTML = response.data.attributes.titre;
    articleChapeau.innerHTML = response.data.attributes.chapeau;
    articleContenu.innerHTML = response.data.attributes.contenu;

    articleCouverture.setAttribute("src", `http://localhost:1337${response.data.attributes.couverture.data.attributes.url}`);
    articleCouverture.setAttribute("alt", `http://localhost:1337${response.data.attributes.couverture.data.attributes.alternativeText}`);

    const fichiers = response.data.attributes.fichiers.data;

    const articleFichiers = document.querySelector('#article-fichiers');
    articleFichiers.innerHTML = '';

    if (fichiers) {

      articleFichiers.innerHTML = '';

      articleFichiers.insertAdjacentHTML('beforeend', '<h3 class="title is-4 has-text-centered has-text-light">Documents</h3>');

      fichiers.forEach(fichier => {
        articleFichiers.insertAdjacentHTML('beforeend', `
          <p id="fichier-${fichier.id}">
            <span class="icon">
              <ion-icon name="document"></ion-icon>
            </span>
            <a class="has-text-success" href="http://localhost:1337${fichier.attributes.url}">${fichier.attributes.name}</a>
          </p>
        `);
    });
    }
  }
});