console.clear(); // Start with a clean console on refesh 
//credits to akapowl: https://codepen.io/akapowl/pen/qBXOMme/5351d83e2b4241bfe3407ef6113e1f51 and mikel: https://codepen.io/mikeK/pen/zYoEEox
gsap.registerPlugin(ScrollTrigger, Draggable);

const sections = gsap.utils.toArray(".horizontal__item");
let maxWidth = 0;

const getMaxWidth = () => {
    maxWidth = 0;
    sections.forEach((section) => {
        maxWidth += section.offsetWidth;
        maxWidth += gsap.getProperty(section, "marginLeft");
    });

    maxWidth += gsap.getProperty(".horizontal", "paddingLeft");
    maxWidth += gsap.getProperty(".horizontal__list", "paddingLeft");
    // after the calculations above the right side of the last image  should be flush against the right side of the window
    // but with the scrollbar sitting on top of it, so you might want to add some space
    // if you want the white margin/padding to be visible
    maxWidth += 700;

    return maxWidth;
};

getMaxWidth();
ScrollTrigger.addEventListener("refreshInit", getMaxWidth);

gsap.set(".horizontal__item h2", {
    y: 50,
    opacity: 0
});

let scrollTween = gsap.to(sections, {
    x: () => `-${maxWidth - window.innerWidth}`,
    ease: "none"
});

let horizontalScroll = ScrollTrigger.create({
    animation: scrollTween,
    trigger: ".horizontal",
    pin: ".wrapper",
    scrub: 0.5,
    end: () => `+=${maxWidth}`,
    invalidateOnRefresh: true
});

//COUNT UP
let numbers = document.querySelectorAll(".numbers");
console.warn(numbers);
var startCount = 0,
    num = {
        var: startCount
    };

let tlNumber1 = gsap.timeline({
        scrollTrigger: {
            trigger: "#number-01",
            containerAnimation: scrollTween,
            start: "50% 50%",
            markers: true,
            scrub: true,
            end: "70% 50%",
            toggleActions: "restart none none reverse"
        }
    })
    .to("#number-01", {
        textContent: "100.5",
        duration: 1,
        snap: { textContent: 0.1 },
        ease: "none",
        // onUpdate: (a,b,c) => {
        //   changeNumber(a,b,c)
        // }
      onUpdate: function() {
        const replaceDot = this._targets[0].textContent.replace('.', ',');
        document.querySelector('#number-01').innerText =replaceDot;
},
    });
    
let tlNumber2 = gsap.timeline({
        scrollTrigger: {
            trigger: "#number-02",
            containerAnimation: scrollTween,
            start: "0% 50%",
            markers: true,
            scrub: true,
            end: "70% 50%",
            toggleActions: "restart none none reverse"
        }
    })
    .to("#number-02", {
        textContent: "200.5",
        snap: { textContent: 0.1 },
        duration: 1,
        ease: "none",
        onUpdate: changeNumber
    });
    
let tlNumber3 = gsap.timeline({
        scrollTrigger: {
            trigger: "#number-03",
            containerAnimation: scrollTween,
            start: "0% 50%",
            markers: true,
            scrub: true,
            end: "70% 50%",
            toggleActions: "restart none none reverse"
        }
    })
    .to("#number-03", {
        textContent: "300,5",
        snap: { textContent: 1 },
        duration: 1,
        ease: "none",
        onUpdate: changeNumber
    });
    
let tlNumber4 = gsap.timeline({
        scrollTrigger: {
            trigger: "#number-04",
            containerAnimation: scrollTween,
            start: "0% 50%",
            markers: true,
            scrub: true,
            end: "50% 50%",
            toggleActions: "restart none none reverse"
        }
    })
    .to("#number-04", {
        textContent: "400,5",
        snap: { textContent: 1 },


        duration: 1,
        ease: "none",
        onUpdate: changeNumber
    });     


function changeNumber(a, b, c) {
    // numbers.innerHTML = (num.var).toFixed(1);
  console.warn(a, b, c);
}

//HEADING ANIMATION
sections.forEach((sct, i) => {

    const heading = sct.querySelector(".horizontal__item h2");

    if (heading) {

        if (i === 0) {

            gsap.to(heading, {
                duration: 1,
                y: 0,
                opacity: 1,
                scrollTrigger: {
                    trigger: ".horizontal",
                    start: "top top",
                    markers: false,
                    toggleActions: "play pause resume reset"
                }
            });

        } else {

            gsap.to(heading, {
                duration: 1,
                y: 0,
                opacity: 1,
                scrollTrigger: {
                    trigger: heading,
                    pinnedContainer: ".wrapper",
                    containerAnimation: scrollTween,
                    start: "50% 100%",
                    end: "100% 0%",
                    markers: false,
                    toggleActions: "play pause resume reset"
                }
            });

        }



    }

});

//MAKE IT DRAGGABLE
var dragRatio = maxWidth / (maxWidth - window.innerWidth);

var drag = Draggable.create(".drag-proxy", {
    trigger: ".horizontal",
    type: "x",
    inertia: false,
    allowContextMenu: true,
    onPress() {
        this.startScroll = horizontalScroll.scroll();
    },
    onDrag() {
        horizontalScroll.scroll(
            this.startScroll - (this.x - this.startX) * dragRatio
        );
    },
    onThrowUpdate() {
        horizontalScroll.scroll(
            this.startScroll - (this.x - this.startX) * dragRatio
        );
    }
})[0];