$(document).ready(function () {
  /**
   * --------------------------Timeline swiper------------------------
   */
  if ($(".key-achievements").length > 1) {
    var timelineSt = gsap.timeline({
      scrollTrigger: {
        trigger: "#key-achievements",
        start: "top 50%",
        onEnter: () => {
          progressBarFill(
            $("#timeline-swiper-progressbar").width() -
              Math.min(window.innerWidth, window.outerWidth) / 2
          );
        },
        onLeaveBack: () => {
          progressBarFill(0);
        },
      },
    });
    var timelineSwiper = new Swiper(".timeline-swiper", {
      direction: "horizontal",
      slidesPerView: 1,
      slidesPerGroup: 1,
      centeredSlides: true,
      spaceBetween: 0,
      breakpoints: {
        1024: {
          slidesPerView: 2,
        },
      },
      speed: 800,
      grabCursor: true,
      pagination: {
        el: ".timeline-swiper-bullets",
        clickable: true,
        renderBullet: function (index, className) {
          return '<span class="' + className + '">' + (index + 1) + "</span>";
        },
      },
      navigation: {
        prevEl: ".timeline-navigation-btn.prev",
        nextEl: ".timeline-navigation-btn.next",
      },
      on: {
        init: () => {
          gsap.to(
            $(".timeline-item-connecting-bar-fill")[0],
            {
              scaleY: 1,
              ease: "back.out",
            },
            ">"
          );
          gsap.to(
            $(".timeline-item-dot")[0],
            {
              autoAlpha: 1,
              scale: 1,
              backgroundColor: "#007dbf",
              ease: "back.out",
            },
            ">"
          );
        },
      },
    });

    timelineSwiper.on("slideChange", () => {
      timelinePaginationChange(timelineSwiper);
    });

    timelineSwiper.on("slideNextTransitionStart", () => {
      progressBarRetract();
    });

    timelineSwiper.on("slidePrevTransitionStart", () => {
      progressBarExpand();
    });

    //detect touch move direction
    let startX = null;
    let isSwiping = false;

    timelineSwiper.on("touchstart", function (e) {
      isSwiping = true;
      startX = e.touches[0].clientX;
      console.log(currentX);
    });

    timelineSwiper.on("touchmove", function (e) {
      if (!isSwiping) return;

      const currentX = e.touches[0].clientX;
      console.log(currentX);
      const diff = startX - currentX;

      if (diff > 5) {
        progressBarExpand();
      } else if (diff < -5) {
        console.log("Swiping left");
        progressBarRetract();
      }
    });

    timelineSwiper.on("touchend", function () {
      isSwiping = false;
      startX = null;
    });

    function progressBarFill(x) {
      gsap.to(
        $("#timeline-swiper-progressbar-fill"),
        {
          width: x,
          duration: 0.4,
          ease: "power1.out",
        },
        ">"
      );
    }
    function progressBarRetract() {
      gsap.fromTo(
        "#timeline-swiper-progressbar-fill",
        { scaleX: 0.5 },
        { scaleX: 1, duration: 0.6, ease: "power1.out" }
      );
    }
    function progressBarExpand() {
      gsap.fromTo(
        "#timeline-swiper-progressbar-fill",
        { scaleX: 1.5 },
        { scaleX: 1, duration: 0.6, ease: "power1.out" }
      );
    }

    function timelinePaginationChange(swiper) {
      gsap.set(".timeline-item-dot", { opacity: 0, scale: 0.5 });
      gsap.set(".timeline-item-connecting-bar-fill", { scaleY: 0 });
      gsap.to(
        $(".timeline-item-connecting-bar-fill")[swiper.activeIndex],
        {
          scaleY: 1,
          duration: 0.4,
          ease: "back.out",
        },
        ">"
      );
      gsap.to(
        $(".timeline-item-dot")[swiper.activeIndex],
        {
          opacity: 1,
          scale: 1,
          backgroundColor: "#007dbf",
          duration: 0.4,
          ease: "back.out",
        },
        "<"
      );
    }
  }
});