window.addEventListener('DOMContentLoaded', (event) => {
  const cardThematiques = document.querySelectorAll('.swiper-slide  .card-thematique');

  function swiperCheckBreakpoints() {
    const hasSwiper = thematiquesSwiper.__swiper__ === true;

    if (window.innerWidth < 960 && hasSwiper) {
      thematiquesSwiper.destroy(true, true);
    }
    if (window.innerWidth >= 960 && !hasSwiper) {
      initiateSwiper();
    }
  }

  function initiateSwiper() {
    thematiquesSwiper = new Swiper('.swiper-container', {
      grabCursor: false,
      slidesPerView: 3,
      spaceBetween: 30,
      a11y: {
        enabled: true,
        prevSlideMessage: textTranslations.previousSlide,
        nextSlideMessage: textTranslations.nextSlide,
        slideRole: '',
        slideLabelMessage: textTranslations.slideLabel,
      },
      // loop: true,
      // centeredSlides: true,
      keyboard: {
        enabled: true,
      },
      navigation: {
        nextEl: '.thematique-button-next',
        prevEl: '.thematique-button-prev',
      },
      pagination: {
        el: '.swiper-pagination',
        clickable: true,
        renderBullet: function (index, className) {
          const ariaLabel = cardThematiques[index].getAttribute('data-taxonomy');

          // return `<button class="${className}" aria-label="${ariaLabel}"></button>`;
          return `<div class="${className}" test tabindex="-1" aria-label="Aller à la slide ${index}"></div>`;
        },
      },
      breakpoints: {
        // when window width is >= 320px

        // when window width is >= 480px
        320: {
          slidesPerView: 2,
        },
        // when window width is >= 640px
        1100: {
          slidesPerView: 3,
        },
      },
      // a11y: false,
    });
  }
  initiateSwiper();
  swiperCheckBreakpoints();

  window.addEventListener('resize', swiperCheckBreakpoints);
});