gsap.registerPlugin(ScrollTrigger);

(function($) {
  $(document).ready(function() {
    initialiseApp();

    function initialiseApp() {
      initialiseGSAPScrollTriggerPinning();
      initialiseGSAPScrollTriggerPinningInsidePinning();
      initialiseLenisScroll();
    }

    function initialiseGSAPScrollTriggerPinning() {
      gsap.utils.toArray('.section').forEach((section, i) => {
        const nextSection = section.nextElementSibling;

        ScrollTrigger.normalizeScroll({
          allowNestedScroll: true
        });

        if (section.classList.contains('four')) {

        } else {
          ScrollTrigger.normalizeScroll(false);

          ScrollTrigger.create({
            trigger: section,
            start: 'bottom bottom',
            pin: true,
            pinType: 'fixed',
            pinSpacing: false,
            anticipatePin: 1,
            scrub: .5,
            invalidateOnRefresh: true,
            ease: 'none'
          })
        }

        gsap.to(section, {
          opacity: 0,
          scrollTrigger: {
            trigger: nextSection,
            start: 'top bottom',
            end: 'top top',
            stagger: .1,
            scrub: .5,
            ease: 'Power4.easeInOut'
          }
        });
      });
    }

    function initialiseGSAPScrollTriggerPinningInsidePinning() {
      let sectionFour = gsap.timeline({
        scrollTrigger: {
          trigger: '.section.four',
          start: 'top bottom',
          end: 'top top'
        }
      });

      let cells = $('.section.four .cell');
      let end = (cells.innerHeight() * (cells.length));
      // let end = (cells.innerHeight() * (cells.length - 1));

      sectionFour.fromTo('.section.four .imgs', {
        autoAlpha: 1,
      }, {
        autoAlpha: 1,
        duration: .3,
        ease: 'Power4.easeInOut',
        scrollTrigger: {
          trigger: '.section.four .imgs',
          start: "top 120px",
          end: end + 'px',
          pin: true
        }
      });

      gsap.utils.toArray('.section.four .cell').forEach(cell => {
        ScrollTrigger.create({
          trigger: cell,
          start: "top center",
          onEnter: function() {
            if ($(cell).hasClass('one')) {
              // do nothing
            } else {
              let imgSrc = $(cell).attr('data-img-src');

              $('.section.four .imgs img').attr('src', imgSrc);

              gsap.fromTo('.section.four .imgs img', {
                autoAlpha: 0,
              }, {
                autoAlpha: 1,
                duration: .6,
                ease: 'Power4.easeInOut',
              });
            }
          },
          onLeaveBack: function() {
            if ($(cell).hasClass('one')) {
              // do nothing
            } else {
              let imgSrc = $(cell).prev().attr('data-img-src');

              $('.section.four .imgs img').attr('src', imgSrc);

              gsap.fromTo('.section.four .imgs img', {
                autoAlpha: 0,
              }, {
                autoAlpha: 1,
                duration: .6,
                ease: 'Power4.easeInOut',
              });
            }
          }
        });
      });
    }

    function initialiseLenisScroll() {
      const lenis = new Lenis({
        smoothWheel: true,
        duration: 1.2
      });

      lenis.on('scroll', ScrollTrigger.update);

      gsap.ticker.add((time) => {
        lenis.raf(time * 1000);
      });

      gsap.ticker.lagSmoothing(0);
    }
  });
}) (jQuery);