//Dom References
const gallery = document.querySelector('.gallery');
const images = document.querySelectorAll('.gallery img');
const prevButton = document.querySelector('.previous');
const nextButton = document.querySelector('.next');

//Keeps track of the current image being displayed
let currentImageIndex = 0;
let translateDistance = -220;

prevButton.addEventListener('click', handlePreviousImages);
nextButton.addEventListener('click', handleNextImages);

function handlePreviousImages() {
    //If we have atleast one previous image to show
    if (currentImageIndex > 0) {
        currentImageIndex--;
        gallery.style.transform = `translateX(${currentImageIndex * translateDistance}px)`;
    }
    
    if(currentImageIndex === 0) {
       prevButton.style.opacity = "0.3"; 
       nextButton.style.opacity = "1";
    }   
}

function handleNextImages() {
    //If we have not yet reached the last image in the list
    if (currentImageIndex !== images.length - 1) {
        currentImageIndex++;
        gallery.style.transform = `translateX(${currentImageIndex * translateDistance}px)`;

        //If we have reached the last image make the next arrow opaque
        if (currentImageIndex === images.length - 1) {
            nextButton.style.opacity = "0.3";
        } else {
            prevButton.style.opacity = "1";
        }
    }
}