console.clear();

gsap.registerPlugin(ScrollTrigger);

$(document).ready(function () {
  const locoScroll = new LocomotiveScroll({
    el: document.querySelector(".smooth-scroll"),
    smooth: true,
  });
  // each time Locomotive Scroll updates, tell ScrollTrigger to update too (sync positioning)
  locoScroll.on("scroll", ScrollTrigger.update);

  // tell ScrollTrigger to use these proxy methods for the ".smooth-scroll" element since Locomotive Scroll is hijacking things
  ScrollTrigger.scrollerProxy(".smooth-scroll", {
    scrollTop(value) {
      return arguments.length
        ? locoScroll.scrollTo(value, 0, 0)
        : locoScroll.scroll.instance.scroll.y;
    }, // we don't have to define a scrollLeft because we're only scrolling vertically.
    getBoundingClientRect() {
      return {
        top: 0,
        left: 0,
        width: window.innerWidth,
        height: window.innerHeight,
      };
    },
  });

  if ($(window).width() > 1024) {
    // Landing Animation Clip Horizontal Scroll Function
    const clippingHorizontalScrolling = document.getElementById("landingClip");
    const clipPinWrap = document.getElementById("clipPinWrap");
    const clipAnimWrap = document.getElementById("clipAnimWrap");
    const getToValue1 = () => -(clipAnimWrap.scrollWidth - window.innerWidth);

    ScrollTrigger.create({
      trigger: clippingHorizontalScrolling,
      start: "top top",
      end: () => "+=" + clipAnimWrap.scrollWidth,
      pin: clipPinWrap,
      invalidateOnRefresh: true,
      scrub: true,
      scroller: ".smooth-scroll",
    });

    const fakeHorizontalAnim1 = gsap.fromTo(
      clipAnimWrap,
      {
        x: () =>
          clipAnimWrap.classList.contains("to-right") ? 0 : getToValue1(),
      },
      {
        x: () =>
          clipAnimWrap.classList.contains("to-right") ? getToValue1() : 0,
        ease: "none",
        scrollTrigger: {
          trigger: clippingHorizontalScrolling,
          start: "top top",
          end: () => "+=" + clipAnimWrap.scrollWidth,
          // end: () => "+=" + (thisAnimWrap.scrollWidth - window.innerWidth),
          invalidateOnRefresh: true,
          scrub: true,
          scroller: ".smooth-scroll",
        },
      }
    );

    const cliptl = gsap.timeline();
    cliptl.fromTo(
      ".fow-black",
      {
        clipPath: "polygon(100% 0%, 100% 0%, 100% 100%, 100% 100%)",
      },
      { clipPath: "polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%)", ease: "none" },
      0
    );

    ScrollTrigger.create({
      trigger: clippingHorizontalScrolling,
      start: () => "top top-=" + (clipAnimWrap.scrollWidth - window.innerWidth),
      end: () => "+=" + window.innerWidth,
      animation: cliptl,
      scrub: true,
      markers: false,
      scroller: ".smooth-scroll",
    });

    // What Section With B/W Horizontal Scroll Function
    const whatHorizontalScrolling = document.getElementById("whatSections");
    const whatPinWrap = document.getElementById("whatPinWrap");
    const whatAnimWrap = document.getElementById("whatAnimWrap");
    const getToValue2 = () => -(whatAnimWrap.scrollWidth - window.innerWidth);

    ScrollTrigger.create({
      trigger: whatHorizontalScrolling,
      start: "top top",
      end: () => "+=" + whatAnimWrap.scrollWidth,
      pin: whatPinWrap,
      invalidateOnRefresh: true,
      scrub: true,
      scroller: ".smooth-scroll",
    });

    const fakeHorizontalAnim2 = gsap.fromTo(
      whatAnimWrap,
      {
        x: () =>
          whatAnimWrap.classList.contains("to-right") ? 0 : getToValue2(),
      },
      {
        x: () =>
          whatAnimWrap.classList.contains("to-right") ? getToValue2() : 0,
        ease: "none",
        scrollTrigger: {
          trigger: whatHorizontalScrolling,
          start: "top top",
          end: () => "+=" + whatAnimWrap.scrollWidth,
          // end: () => "+=" + (thisAnimWrap.scrollWidth - window.innerWidth),
          invalidateOnRefresh: true,
          scrub: true,
          scroller: ".smooth-scroll",
        },
      }
    );
    const tl = gsap.timeline({
      scrollTrigger: {
        trigger: ".switch-image-section",
        pin: true,
        scrub: 0.1,
        start: "top 0%",
        end: "+=4000",
        markers: false,
        toggleActions: "play pause pause reverse",
        scroller: ".smooth-scroll",
      },
    });
    tl.to(".switch-in-image", 0.75, {
      y: "-95%",
      opacity: 1,
      ease: "power1.inOut",
      stagger: 0.1,
    });
    tl.to(".switch-in-image", 0.25, {
      scale: 1,
    });

    // PROJECT Section horizontal Scrolling Section Goes Here
    // Project Section With B/W Horizontal Scroll Function
    const projectHorizontalScrolling =
      document.getElementById("projectSections");
    const projectPinWrap = document.getElementById("projectPinWrap");
    const projectAnimWrap = document.getElementById("projectAnimWrap");
    const getToValue3 = () =>
      -(projectAnimWrap.scrollWidth - window.innerWidth);

    ScrollTrigger.create({
      trigger: projectHorizontalScrolling,
      start: "top top",
      end: () => "+=" + projectAnimWrap.scrollWidth,
      pin: projectPinWrap,
      invalidateOnRefresh: true,
      scrub: true,
      scroller: ".smooth-scroll",
    });

    const fakeHorizontalAnim3 = gsap.fromTo(
      projectAnimWrap,
      {
        x: () =>
          projectAnimWrap.classList.contains("to-right") ? 0 : getToValue3(),
      },
      {
        x: () =>
          projectAnimWrap.classList.contains("to-right") ? getToValue3() : 0,
        ease: "none",
        scrollTrigger: {
          trigger: projectHorizontalScrolling,
          start: "top top",
          end: () => "+=" + projectAnimWrap.scrollWidth,
          // end: () => "+=" + (thisAnimWrap.scrollWidth - window.innerWidth),
          invalidateOnRefresh: true,
          scrub: true,
          scroller: ".smooth-scroll",
        },
      }
    );

    // FOOTER SCROLL WIT CLIP BW
    // Landing Animation Clip Horizontal Scroll Function
    const footerHorizontalScrolling = document.getElementById("footerSection");
    const footerPinWrap = document.getElementById("footerPinWrap");
    const footerAnimWrap = document.getElementById("footerAnimWrap");
    const getToValueFooter = () =>
      -(footerAnimWrap.scrollWidth - window.innerWidth);

    ScrollTrigger.create({
      trigger: footerHorizontalScrolling,
      start: "top top",
      end: () => "+=" + footerAnimWrap.scrollWidth,
      pin: footerPinWrap,
      invalidateOnRefresh: true,
      scrub: true,
      scroller: ".smooth-scroll",
    });

    const footerHorizontalAnim1 = gsap.fromTo(
      footerAnimWrap,
      {
        x: () =>
          footerAnimWrap.classList.contains("to-right")
            ? 0
            : getToValueFooter(),
      },
      {
        x: () =>
          footerAnimWrap.classList.contains("to-right")
            ? getToValueFooter()
            : 0,
        ease: "none",
        scrollTrigger: {
          trigger: footerHorizontalScrolling,
          start: "top top",
          // end: () => "+=" + footerAnimWrap.scrollWidth,
          end: () => "+=" + (footerAnimWrap.scrollWidth - window.innerWidth),
          invalidateOnRefresh: true,
          scrub: true,
          scroller: ".smooth-scroll",
        },
      }
    );

    const footertl = gsap.timeline();
    footertl.fromTo(
      ".fow-black",
      {
        clipPath: "polygon(100% 0%, 100% 0%, 100% 100%, 100% 100%)",
      },
      { clipPath: "polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%)", ease: "none" },
      0
    );

    ScrollTrigger.create({
      trigger: footerHorizontalScrolling,
      start: () =>
        "top top-=" + (footerAnimWrap.scrollWidth - window.innerWidth),
      end: () => "+=" + window.innerWidth,
      animation: footertl,
      scrub: true,
      markers: false,
      scroller: ".smooth-scroll",
    });
  } else {
    alert("not mobile");
  }

  // const whattl = gsap.timeline();
  // whattl.fromTo(
  //   ".fow-black",
  //   {
  //     clipPath: "polygon(100% 0%, 100% 0%, 100% 100%, 100% 100%)",
  //   },
  //   { clipPath: "polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%)", ease: "none" },
  //   0
  // );

  // ScrollTrigger.create({
  //   trigger: clippingHorizontalScrolling,
  //   start: () => "top top-=" + (clipAnimWrap.scrollWidth - window.innerWidth),
  //   end: () => "+=" + window.innerWidth,
  //   animation: whattl,
  //   scrub: true,
  //   markers: false,
  //   scroller: ".smooth-scroll",
  // });

  // each time the window updates, we should refresh ScrollTrigger and then update LocomotiveScroll.
  ScrollTrigger.addEventListener("refresh", () => locoScroll.update());

  // after everything is set up, refresh() ScrollTrigger and update LocomotiveScroll because padding may have been added for pinning, etc.
  ScrollTrigger.refresh();
});
