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

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

function initiateSwiper() {
	const cardThematiques = document.querySelectorAll(".swiper-slide  .card-thematique");

	if (!Swiper) return;

	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,
	});
}
window.addEventListener("DOMContentLoaded", (event) => {
	initiateSwiper();
	swiperCheckBreakpoints();

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