console.clear();

gsap.registerPlugin(Draggable);

const nav = document.querySelector('nav');
const wrapper = document.querySelector('ul');
const items = document.querySelectorAll('li');
const itemHeight = items[0].clientHeight;
const itemsHeight = items.length * itemHeight;
const itemsProgress = gsap.utils.wrap(0, 1);

// Set the height of each item so they stack
items.forEach((item, index) => {
  gsap.set(item, {
    y: index * itemHeight,
    top: -itemHeight,
  })
})

// Create animation... try unpausing it to see what's going on
const animation = gsap.to("li", {
  duration: 1,
  y: `+=${itemsHeight}`, // the total height of the items
  paused: true,
  ease: "linear", // disable easing, it f's with this
  repeat: -1, // repeat infinitely
  modifiers: {
    y: (y) => {
      // Set the Y value to the value of the remainder after dividing the current Y position by the total number of items. This is what sets the item position and calculates whether its position should be shifted back to the top of the page. If the itemsHeight is 600 and the Y is 600, then the remainder is 0 so it gets moved back to the top. If the itemsHeight is 600 and the Y is 700, the remainder is 100 so the item is set to 100px
      y = parseFloat(y) % itemsHeight;
      return `${y}px`;
    }
  }
}).progress(1 / items.length);

// Update progress
function updateProgress() {
  animation.progress(itemsProgress(props("y") / itemsHeight));
}

// Create a proxy to capture the dragging without actually affecting the element. In other words, we want to understand the users drag behaviour without actually dragging the thing, because we just use this drag data elsewhere
const proxy = document.createElement("div");
const props = gsap.getProperty(proxy);

Draggable.create(proxy, {
  trigger: nav,
  throwProps: true,
  onDrag: updateProgress,
  onThrowUpdate: updateProgress,
  snap: {
    y: gsap.utils.snap(itemHeight)
  }
})