(function () {
    "use strict";

    const slideTimeout = 10000;

    // Initialisation du premier carrousel
    initializeCarousel({
        slidesSelector: '.slide',
        dotsContainerSelector: '.carousel-dots',
        prevButtonSelector: '#prev',
        nextButtonSelector: '#next',
    });

    // Initialisation du deuxième carrousel
    initializeCarousel({
        slidesSelector: '.slide2',
        dotsContainerSelector: '.carousel-dots2',
        prevButtonSelector: '#prev2',
        nextButtonSelector: '#next2',
    });

    /**
     * Fonction pour initialiser un carrousel.
     * @param {Object} config - Configuration pour chaque carrousel.
     */
    function initializeCarousel(config) {
        const slides = document.querySelectorAll(config.slidesSelector);
        const dotsContainer = document.querySelector(config.dotsContainerSelector);
        const prevButton = document.querySelector(config.prevButtonSelector);
        const nextButton = document.querySelector(config.nextButtonSelector);
        let dots;
        let intervalId;
        let currentSlide = 0;

        function slideTo(index) {
            if (index < 0) {
                index = slides.length - 1;
            } else if (index >= slides.length) {
                index = 0;
            }
            currentSlide = index;

            slides.forEach((slide) => {
                slide.style.transform = `translateX(-${currentSlide * 100}%)`;
            });

            dots.forEach((dot, i) => {
                dot.classList = `dot ${i === currentSlide ? 'active' : 'inactive'}`;
            });
        }

        function showNextSlide() {
            slideTo(currentSlide + 1);
        }

        // Création des "dots" de pagination
        dotsContainer.innerHTML = '';
        for (let i = 0; i < slides.length; i++) {
            const dotClass = i === currentSlide ? 'active' : 'inactive';
            const dot = document.createElement('span');
            dot.className = `dot ${dotClass}`;
            dot.dataset.slideId = i;
            dotsContainer.appendChild(dot);
        }

        dots = dotsContainer.querySelectorAll('.dot');
        dots.forEach((dot, index) => {
            dot.addEventListener('click', () => slideTo(index));
        });

        prevButton.addEventListener('click', () => slideTo(currentSlide - 1));
        nextButton.addEventListener('click', showNextSlide);

        intervalId = setInterval(showNextSlide, slideTimeout);

        slides.forEach((slide) => {
            slide.addEventListener('mouseover', () => clearInterval(intervalId));
            slide.addEventListener('mouseout', () => {
                intervalId = setInterval(showNextSlide, slideTimeout);
            });

            slide.addEventListener('touchstart', (e) => (startX = e.touches[0].clientX));
            slide.addEventListener('touchend', (e) => {
                const endX = e.changedTouches[0].clientX;
                if (startX > endX) slideTo(currentSlide + 1);
                else if (startX < endX) slideTo(currentSlide - 1);
            });
        });

        slideTo(currentSlide);
    }
})();
