class Lightbox {
	constructor(lightboxElement) {
		this.lightbox = lightboxElement;
		this.closeButton = this.lightbox.querySelector(".lightbox__close");
		this.prevButton = this.lightbox.querySelector(".lightbox__prev");
		this.nextButton = this.lightbox.querySelector(".lightbox__next");
		this.gallery = this.lightbox.previousElementSibling;
		this.currentPictureIndex = 0;

		if (this.gallery) {
			this.pictures = this.gallery.querySelectorAll("img.lightbox-gallery__picture");
			this.lightboxTriggers = this.gallery.querySelectorAll(".lightbox-gallery__trigger");
			this.init();
		}
	}

	init() {
		this.lightboxTriggers.forEach((button, index) => {
			button.addEventListener("click", () => {
				this.showLightbox();
				this.setCurrentPicture(this.pictures[index]);
				this.setCurrentPictureIndex(index);
			});
		});

		this.closeButton.addEventListener("click", () => {
			this.hideLightbox();
		});

		this.prevButton.addEventListener("click", () => {
			this.showPreviousPicture();
		});

		this.nextButton.addEventListener("click", () => {
			this.showNextPicture();
		});

		document.addEventListener("keydown", (event) => {
			if (event.key === "Escape") {
				this.hideLightbox();
			}

			if (event.key === "ArrowLeft") {
				this.showPreviousPicture();
			}

			if (event.key === "ArrowRight") {
				this.showNextPicture();
			}
		});
	}

	showLightbox() {
		this.lightbox.classList.remove("lightbox--inactive");
		this.lightbox.classList.add("lightbox--active");
		this.closeButton.focus();
		this.lightbox.setAttribute("aria-hidden", "false");
	}

	hideLightbox() {
		this.lightbox.classList.remove("lightbox--active");
		this.lightbox.classList.add("lightbox--inactive");
		this.lightbox.setAttribute("aria-hidden", "true");
		// this.lightboxTriggers[this.currentPictureIndex].focus();
	}

	setCurrentPicture(picture) {
		const viewedPicture = this.lightbox.querySelector(".lightbox__current-picture img");
		const viewedDescription = this.lightbox.querySelector(".lightbox__current-picture-description");

		viewedPicture.src = picture.src;
		viewedPicture.alt = picture.alt;

		const imageDescription = [picture.dataset.description, picture.dataset.caption].filter(Boolean);
		viewedDescription.textContent = imageDescription.join(" — ");
	}

	setCurrentPictureIndex(index) {
		this.currentPictureIndex = index;
	}

	showPreviousPicture() {
		if (this.currentPictureIndex > 0) {
			this.currentPictureIndex--;
		} else {
			this.currentPictureIndex = this.pictures.length - 1;
		}
		this.setCurrentPicture(this.pictures[this.currentPictureIndex]);
	}

	showNextPicture() {
		if (this.currentPictureIndex < this.pictures.length - 1) {
			this.currentPictureIndex++;
		} else {
			this.currentPictureIndex = 0;
		}
		this.setCurrentPicture(this.pictures[this.currentPictureIndex]);
	}
}

document.addEventListener("DOMContentLoaded", () => {
	const lightboxes = document.querySelectorAll(".lightbox");
	lightboxes.forEach((lightboxElement) => {
		new Lightbox(lightboxElement);
	});
});