import Swiper from "swiper/bundle";
import "swiper/css/bundle";
import "./style.scss";

function ready() {
	document
		.querySelectorAll(".gtm-slider,.wp-block-gtm-slider-template")
		.forEach((el, i) => {
			let settings = JSON.parse(el.getAttribute("data-swiper"));
			const idClass = "gtm-slider-id-" + i;

			if (settings.navigation) {
				settings.navigation = {
					nextEl: ".swiper-button-next",
					prevEl: ".swiper-button-prev",
				};
			}

			if (settings.pagination) {
				settings.pagination = {
					el: ".swiper-pagination",
					type: "bullets",
				};
			}

			// Find swiper-container
			const swipercontainer = el.classList.contains("swiper-container")
				? el
				: el.querySelector(".swiper-container");

			swipercontainer.classList.add(idClass);

			const instance = new Swiper(swipercontainer, settings);
		});
}

if (document.readyState === "complete") {
	// Document already fully loaded
	ready();
} else {
	// Add event listener for DOMContentLoaded (fires when document is fully loaded)
	document.addEventListener("DOMContentLoaded", ready);
}