window.addEventListener("load", () => {
  class CardDeck {
    constructor(el) {
      //get main element
      this.el = el;
      console.log("I am a card deck!");

      //get cards
      this.cards = this.el.querySelectorAll(".rl-card-grid");

      this.lazyImages = document.querySelectorAll('img[loading="lazy"');

      this.cards.forEach((card, index) => {
        gsap.set(card, {
          zIndex: this.cards.length + index,
        });
      });
      this.init();
    }

    handleLazy() {


    }

    init() {


      let mm = gsap.matchMedia();

      mm.add("(min-width:991px)", () => {
        this.cards.forEach((card, index) => {
          const pin = gsap.timeline({
            scrollTrigger: {
              pin: card,
              trigger: card,
              start: "center center",
              endTrigger: this.cards[this.cards.length - 1],
              end: "center center",
              scrub: true,
              // anticipatePin: true,
            },
          });

          const animate = gsap.timeline({
            scrollTrigger: {
              trigger: card,
              scrub: true,
              start: "center center",
              end: "+=100%",
            },
          });
          if (index === this.cards.length - 1) {
            return;
          }
          animate.to(card, {
            scale: 0.9,
          });
        });

        // for(const img of this.lazyImages) {
        //   img.addEventListener('load', ()=> {
        //     ScrollTrigger.refresh();
        //   })
        // }

      });
    }
  }

  let cardDecks = document.querySelectorAll(".rl-card-deck");

  if (cardDecks || cardDecks.length > 0) {
    cardDecks.forEach((cardDeck) => {
      new CardDeck(cardDeck);
    });
  }


});