// Initialize data values
const container = document.querySelector('.container');
const galleryWrapper = container.querySelector('.gallery-wrapper');
const slides = galleryWrapper.querySelectorAll('.gallery .card');
const lastSlideIndex = slides.length - 1;
let currentSlide;

// Define Functions
const getCurrentSlide = () => {
    let currentSlideIndex = 0;
    
    currentSlideIndex = slides.forEach((slide, index) => {
        if (slide.classList.contains('current')) {
            return index;
        }
    });
    
    return currentSlideIndex;
};

const setCurrentSlide = () => {
    container.setAttribute('data-current-slide', currentSlide);
    slides.forEach((slide) => slide.classList.remove('current'));
    slides[currentSlide].classList.add('current');
    
    // Handle buttons
    if (currentSlide === 0) {
        document.querySelector('.previous').classList.add('faded');
    } else if (currentSlide === lastSlideIndex) {
        document.querySelector('.next').classList.add('faded');
    } else {
        const removeFaded = document.querySelector('.faded');
        if (removeFaded) {
            removeFaded.classList.remove('faded');
        }
    }
};

// Add listeners
document.querySelector('.next').addEventListener('click', () => {
    const nextSlide = currentSlide += 1;
    currentSlide = nextSlide > lastSlideIndex ? lastSlideIndex : nextSlide;
    setCurrentSlide();
});

document.querySelector('.previous').addEventListener('click', () => {
    const prevSlide = currentSlide -= 1;
    currentSlide = prevSlide < 0 ? 0 : prevSlide;
    setCurrentSlide();
});


// Initialize DOM attributes
currentSlide = getCurrentSlide() || 0;
setCurrentSlide();
container.setAttribute('data-last-slide', lastSlideIndex);
container.setAttribute('data-current-slide', getCurrentSlide());