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

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

	init() {
		this.pictures.forEach((picture, index) => {
			picture.addEventListener("click", () => {
				this.showLightbox();
				this.setCurrentPicture(picture);
				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");
	}

	hideLightbox() {
		this.lightbox.classList.remove("lightbox--active");
		this.lightbox.classList.add("lightbox--inactive");
	}

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

	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", () => {
	new Lightbox();
});