document.addEventListener('DOMContentLoaded', () => {
    // Registra il plugin ScrollTrigger con GSAP
    gsap.registerPlugin(ScrollTrigger);
    console.log('ScrollTrigger registrato');

    /**
     * Trova tutti gli elementi che hanno classi che iniziano con 'edgeslider' seguite da un numero.
     * Raccogli nomi di classi base unici (es. 'edgeslider1') per impostare animazioni per ogni slider.
     */
    const potentialEdgeSliders = document.querySelectorAll('[class*="edgeslider"]');
    const edgeSliders = [];
    const seenBaseClassNames = new Set();

    potentialEdgeSliders.forEach(element => {
        element.classList.forEach(className => {
            // Usa una regex per abbinare 'edgeslider' seguito da uno o più numeri all'inizio del nome della classe
            const match = className.match(/^(edgeslider\d+)/);
            if (match) {
                // Estrai il nome della classe base (es. 'edgeslider1')
                const baseClassName = match[1];
                if (!seenBaseClassNames.has(baseClassName)) {
                    seenBaseClassNames.add(baseClassName);
                    edgeSliders.push({
                        baseClassName: baseClassName
                    });
                }
            }
        });
    });

    console.log('Edge sliders trovati:', edgeSliders);

    /**
     * Funzione per aggiornare l'animazione di uno slider specifico.
     * @param {Object} slider - L'oggetto slider con la proprietà baseClassName.
     */
    function updateEdgeSliderAnimation(slider) {
        const baseClassName = slider.baseClassName;
        console.log('[SLIDER_LOG] | baseClassName:', baseClassName);

        // Costruisci i nomi delle classi per wrapper, viewport e items
        const wrapperClass = `${baseClassName}_section-wrapper`;
        const viewportClass = `${baseClassName}_height`;
        const itemClass = `${baseClassName}_section-item`;

        console.log('[SLIDER_LOG] | wrapperClass:', wrapperClass);
        console.log('[SLIDER_LOG] | viewportClass:', viewportClass);
        console.log('[SLIDER_LOG] | itemClass:', itemClass);

        // Seleziona gli elementi wrapper e viewport
        const wrapper = document.querySelector(`.${wrapperClass}`);
        const viewport = document.querySelector(`.${viewportClass}`);

        if (!wrapper || !viewport) {
            console.error(`[SLIDER_LOG] | Elementi .${wrapperClass} o .${viewportClass} non trovati nel DOM.`);
            return;
        }

        console.log('[SLIDER_LOG] | elemento wrapper:', wrapper);
        console.log('[SLIDER_LOG] | elemento viewport:', viewport);

        // Calcola l'altezza del viewport
        const viewportHeight = viewport.clientHeight;
        console.log('[SLIDER_LOG] | viewportHeight:', viewportHeight);

        // Seleziona tutti gli items
        const items = wrapper.querySelectorAll(`.${itemClass}`);
        console.log('[SLIDER_LOG] | numero di items selezionati:', items.length);

        // Calcola la larghezza totale e i margini
        let totalWidth = 0;
        let totalMargin = 0;

        items.forEach((item, index) => {
            const style = window.getComputedStyle(item);
            const width = item.offsetWidth;
            const marginLeft = parseFloat(style.marginLeft);
            const marginRight = parseFloat(style.marginRight);
            totalWidth += width;
            totalMargin += marginLeft + marginRight;

            console.log(`[SLIDER_LOG] | Item ${index + 1}: width=${width}, marginLeft=${marginLeft}, marginRight=${marginRight}`);
        });

        /**
         * Calcola le dimensioni richieste.
         * @param {string} ask - Il tipo di dimensione da calcolare ("maxXMovement" o "maxYScroll").
         * @returns {number|null} - Il valore calcolato o null.
         */
        function calculateDimension(ask) {
            // Ottieni informazioni sulla grandezza del browser
            const windowWidth = window.innerWidth;
            const windowHeight = window.innerHeight;

            console.log('[SLIDER_LOG] | window.innerWidth:', windowWidth);
            console.log('[SLIDER_LOG] | window.innerHeight:', windowHeight);

            // Calcola la larghezza totale del contenuto
            const totalContentWidth = totalWidth + totalMargin;
            console.log('[SLIDER_LOG] | totalContentWidth:', totalContentWidth);

            // Calcola il movimento massimo in x
            const maxXMovement = totalContentWidth - windowWidth;
            console.log('[SLIDER_LOG] | maxXMovement:', maxXMovement);

            // Calcola quanto è alto il browser
            const maxYScroll = viewportHeight - windowHeight;
            console.log('[SLIDER_LOG] | maxYScroll:', maxYScroll);

            if (ask === "maxXMovement") {
                return maxXMovement;
            } else if (ask === "maxYScroll") {
                return maxYScroll;
            } else {
                return null;
            }
        }

        // Crea o aggiorna l'animazione GSAP
        gsap.to(wrapper, {
            x: () => {
                const movement = calculateDimension("maxXMovement") * (-1);
                console.log('[SLIDER_LOG] | Animazione GSAP - movimento in x:', movement);
                return movement;
            }, // Movimento in x
            ease: "sine.inOut",
            scrollTrigger: {
                trigger: viewport,
                start: 'top top',
                end: () => {
                    const endValue = `+=${calculateDimension("maxYScroll")}`;
                    console.log('[SLIDER_LOG] | ScrollTrigger end:', endValue);
                    return endValue;
                }, // La durata dello scroll
                scrub: true,
                invalidateOnRefresh: true, // Abilita l'invalidazione per ottenere valori aggiornati
                anticipatePin: 1,
                markers: false, // Abilita per debug
                onEnter: () => {
                    console.log('[SLIDER_LOG] | viewport entrato nella visualizzazione. Aggiornamento animazione.');
                    // Optional: Puoi aggiungere logica aggiuntiva qui se necessario
                }
            }
        });

        // Eventi di ScrollTrigger per debug
        ScrollTrigger.addEventListener('refreshInit', () => {
            console.log('ScrollTrigger refreshInit event triggered');
        });

        ScrollTrigger.addEventListener('refresh', () => {
            console.log('ScrollTrigger refresh event triggered');
        });

        ScrollTrigger.addEventListener('toggle', (self) => {
            console.log(`ScrollTrigger toggle event: isActive = ${self.isActive}`);
        });
    }

    // Itera attraverso ogni edge slider per impostare gli aggiornamenti dell'animazione
    edgeSliders.forEach(slider => {
        const baseClassName = slider.baseClassName;
        console.log('[SLIDER_LOG] | baseClassName:', baseClassName);

        // Costruisci i nomi delle classi per wrapper, viewport e items
        const wrapperClass = `${baseClassName}_section-wrapper`;
        const viewportClass = `${baseClassName}_height`;
        const itemClass = `${baseClassName}_section-item`;

        console.log('[SLIDER_LOG] | wrapperClass:', wrapperClass);
        console.log('[SLIDER_LOG] | viewportClass:', viewportClass);
        console.log('[SLIDER_LOG] | itemClass:', itemClass);

        // Seleziona gli elementi wrapper e viewport
        const wrapper = document.querySelector(`.${wrapperClass}`);
        const viewport = document.querySelector(`.${viewportClass}`);

        if (!wrapper || !viewport) {
            console.error(`[SLIDER_LOG] | Elementi .${wrapperClass} o .${viewportClass} non trovati nel DOM.`);
            return;
        }

        console.log('[SLIDER_LOG] | elemento wrapper:', wrapper);
        console.log('[SLIDER_LOG] | elemento viewport:', viewport);

        // Imposta ScrollTrigger per aggiornare l'animazione quando l'elemento viewport diventa visibile
        ScrollTrigger.create({
            trigger: viewport,
            start: 'top bottom', // Quando la parte superiore del viewport tocca la parte inferiore del trigger
            onEnter: () => {
                console.log('[SLIDER_LOG] | viewport visibile. Impostazione/aggiornamento animazione.');
                updateEdgeSliderAnimation(slider);
            },
            once: true, // Esegue solo una volta
            markers: false // Imposta su true se desideri vedere i markers per questo ScrollTrigger
        });
    });

    // Rinfresca ScrollTrigger dopo tutte le configurazioni
    ScrollTrigger.refresh();
});