document.addEventListener('DOMContentLoaded', function () {

	'use strict';

	/* =====================================================
	 * CARRUSEL
	 * ===================================================== */

	document.querySelectorAll('.gpvd-gallery-wrap').forEach(function (wrapper) {

		const gallery = wrapper.querySelector('.gpvd-gallery');
		const prev = wrapper.querySelector('.gpvd-slider-prev');
		const next = wrapper.querySelector('.gpvd-slider-next');

		if (!gallery) {
			return;
		}

		function moveCarousel(direction) {

			const item = gallery.querySelector('.gpvd-gallery-item');

			if (!item) {
				return;
			}

			const gap = parseInt(
				window.getComputedStyle(gallery).gap
			) || 0;

			const move = item.offsetWidth + gap;

			gallery.scrollBy({
				left: direction * move,
				behavior: 'smooth'
			});
		}

		if (prev) {
			prev.addEventListener('click', function (e) {
				e.preventDefault();
				e.stopPropagation();

				moveCarousel(-1);
			});
		}

		if (next) {
			next.addEventListener('click', function (e) {
				e.preventDefault();
				e.stopPropagation();

				moveCarousel(1);
			});
		}

	});


	/* =====================================================
	 * LIGHTBOX
	 * ===================================================== */

	function openLightbox(url, alt) {

		/* Evitar dos lightbox al mismo tiempo */

		const oldLightbox =
			document.querySelector('.gpvd-lightbox-overlay');

		if (oldLightbox) {
			oldLightbox.remove();
		}


		/* Crear fondo */

		const overlay =
			document.createElement('div');

		overlay.className =
			'gpvd-lightbox-overlay';


		/* Crear imagen */

		const image =
			document.createElement('img');

		image.className =
			'gpvd-lightbox-image';

		image.src = url;

		image.alt = alt || '';


		/* Bot贸n cerrar */

		const close =
			document.createElement('button');

		close.type = 'button';

		close.className =
			'gpvd-lightbox-close';

		close.innerHTML = '×';

		close.setAttribute(
			'aria-label',
			'Cerrar imagen'
		);


		/* Agregar elementos */

		overlay.appendChild(image);

		overlay.appendChild(close);

		document.body.appendChild(overlay);


		/* Bloquear scroll */

		document.body.style.overflow =
			'hidden';


		/* Funci贸n cerrar */

		function removeLightbox() {

			if (overlay) {
				overlay.remove();
			}

			document.body.style.overflow =
				'';

			document.removeEventListener(
				'keydown',
				escapeHandler
			);
		}


		/* Escape */

		function escapeHandler(event) {

			if (event.key === 'Escape') {
				removeLightbox();
			}
		}


		/* Cerrar bot贸n */

		close.addEventListener(
			'click',
			function (e) {

				e.preventDefault();
				e.stopPropagation();

				removeLightbox();
			}
		);


		/* Cerrar haciendo clic fuera */

		overlay.addEventListener(
			'click',
			function (e) {

				if (e.target === overlay) {
					removeLightbox();
				}

			}
		);


		/* Tecla ESC */

		document.addEventListener(
			'keydown',
			escapeHandler
		);

	}


	/* =====================================================
	 * DETECTAR CLIC EN LAS FOTOS
	 * ===================================================== */

	document.addEventListener(
		'click',
		function (e) {

			const link =
				e.target.closest(
					'.gpvd-lightbox-link'
				);


			if (!link) {
				return;
			}


			/* Evitar que el enlace abra la imagen directamente */

			e.preventDefault();

			e.stopPropagation();


			const image =
				link.querySelector('img');


			const alt =
				image
					? image.getAttribute('alt')
					: '';


			const url =
				link.getAttribute('href');


			if (!url) {
				return;
			}


			openLightbox(
				url,
				alt
			);

		},
		true
	);

});