import gsap from "https://cdn.skypack.dev/gsap";
import ScrollTrigger from 'https://cdn.skypack.dev/gsap/ScrollTrigger'

gsap.registerPlugin(ScrollTrigger)

const stagger = 0.25;
const duration = 1;
const offset = 1.25;

let iteration = 0
let trigger

const BOXES = gsap.utils.toArray(".box");
const SHIFT_DURATION = (BOXES.length - 1) * stagger + duration
const SNAP = gsap.utils.snap(1 / BOXES.length)

const getShift = (zIndex) => {
  const SHIFT = gsap.timeline();
  for (let b = 0; b < BOXES.length; b++) {
    const TIME = b * stagger;
    SHIFT.set(BOXES[b], { zIndex, xPercent: -200, scale: 0 }, TIME)
    SHIFT.fromTo(
      BOXES[b],
      {
        xPercent: -200
      },
      {
        xPercent: 100,
        duration,
        ease: "none",
        immediateRender: false,
      },
      TIME
    ).fromTo(
      BOXES[b],
      {
        scale: 0
      },
      {
        scale: 1,
        repeat: 1,
        yoyo: true,
        ease: 'none',
        duration: duration * 0.5,
        immediateRender: false,
      },
      TIME
    );
  }
  return SHIFT;
};

const LOOP = gsap.timeline({
  paused: true
})
  .add(getShift(0), 0)
  .add(getShift(1), BOXES.length * stagger)
  .add(getShift(2), BOXES.length * stagger * 2)

const LOOP_HEAD = gsap.fromTo(LOOP, {
  totalTime: (SHIFT_DURATION - (duration - stagger)) + offset,
},
{
  totalTime: (SHIFT_DURATION * 2 - ((duration - stagger) * 2)) + offset,
  duration: 1,
  ease: 'none',
  repeat: -1,
  paused: true
})

const SCRUB = gsap.to(LOOP_HEAD, {
  totalTime: 0,
  paused: true,
  duration: 0.5,
  ease: 'power3'
})

const wrapForward = trigger => {
  console.info('WRAP')
  iteration++
  trigger.wrapping = true
  trigger.scroll(trigger.start + 1)
}
const wrapBackward = trigger => {
  iteration--
  if (iteration < 0) {
    iteration = 9
    LOOP_HEAD.totalTime(LOOP_HEAD.totalTime() + LOOP_HEAD.duration() * 10)
    SCRUB.pause()
  }
  trigger.wrapping = true
  trigger.scroll(trigger.end - 1)
}

const scrubTo = totalTime => {
  const PROGRESS = (totalTime - (LOOP_HEAD.duration() * iteration)) / LOOP_HEAD.duration()
  console.info(PROGRESS)
  if (PROGRESS > 1) {
    wrapForward(trigger)
  } else if (PROGRESS < 0) {
    wrapBackward(trigger)
  } else {
    trigger.scroll(trigger.start + PROGRESS * (trigger.end - trigger.start))
  }
}


trigger = ScrollTrigger.create({
  start: 0,
  end: '+=2000',
  horizontal: false,
  pin: '.boxes',
  onUpdate: self => {
    if (self.progress === 1 && self.direction > 0 && !self.wrapping) {
      wrapForward(self)
    } else if (self.progress < 1e-5 && self.direction < 0) {
      wrapBackward(self)
    } else {
      SCRUB.vars.totalTime = LOOP_HEAD.duration() * (iteration + self.progress)
      SCRUB.invalidate().restart()
      self.wrapping = false
    }
  }
})

const LABEL = document.querySelector('label')
ScrollTrigger.addEventListener("scrollEnd", () => {
  const SNAP_POINT = SNAP((iteration + trigger.progress) * LOOP_HEAD.duration())
  LABEL.innerText = `Index: ${SNAP_POINT}`
  scrubTo(SNAP_POINT)
});

const NEXT = document.querySelector('[data-control="next"]')
const PREV = document.querySelector('[data-control="previous"]')

NEXT.addEventListener('click', () => {
  const DESTINATION = SNAP(SCRUB.vars.totalTime + (1 / BOXES.length))
  scrubTo(DESTINATION)
})
PREV.addEventListener('click', () => {
  const DESTINATION = SNAP(SCRUB.vars.totalTime - (1 / BOXES.length))
  scrubTo(DESTINATION)
})