import PhotoSwipe from "photoswipe";
import PhotoSwipeLightbox from "photoswipe/lightbox";
import "photoswipe/photoswipe.css";

function addFileTypes(selector, types = []) {
	let selectorOutput = [];

	types.forEach((type) => {
		selectorOutput.push(`${selector}[href$=".${type}"]`);
	});

	return selectorOutput.join(",");
}

// Exlude images from initialization
// Since it already initialed from other blocks
// and the PhotoSwipe does not check this condition
function excludeFromInitial(blockSelector) {
	const galleryImages = document.querySelectorAll(
		addFileTypes(blockSelector + " a[data-pswp-width]", [
			"jpg",
			"jpeg",
			"png",
			"webp",
		])
	);

	// Mark as initialized
	for (const img of galleryImages) {
		img.setAttribute("data-gtm-pswp-excluded", 1);
	}
}

function ready() {
	if (PhotoSwipeLightbox) {
		const baseOptions = {
			showHideAnimationType: "zoom",
			...(window.gtm_photoswipe_options || {}),

			// Used inside js only, Can't overriden from server-side
			pswpModule: PhotoSwipe,
		};

		const galleryLightbox = new PhotoSwipeLightbox({
			...baseOptions,
			gallery: ".wp-block-gallery",
			children: addFileTypes("a[data-pswp-width]", [
				"jpg",
				"jpeg",
				"png",
				"webp",
			]),
		});
		galleryLightbox.init();

		excludeFromInitial(".wp-block-gallery ");

		const anyLightbox = new PhotoSwipeLightbox({
			...baseOptions,
			gallery: addFileTypes(
				"a[data-pswp-width]:not([data-gtm-pswp-excluded])",
				["jpg", "jpeg", "png", "webp"]
			) + ',a[data-pswp-type]', // To support featured video(oEmbed) in lightbox
		});

		anyLightbox.on('contentLoad', (e) => {
			const { content } = e;
			if (content.type === 'html') {
				// prevent the deafult behavior
				e.preventDefault();
		
				// Create a container for iframe
				// and assign it to the `content.element` property
				let embedDiv = document.createElement('div');
				embedDiv.className = 'pswp__gtm-embed-container';
				embedDiv.innerHTML = content.data.element.dataset.pswpHtml;
				content.element = embedDiv;
			}
		});
		
		anyLightbox.init();
	}
}

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);
}