const { styler, spring } = window.popmotion;

window.scrolljackUseCasesIndex = 0;

const springParams = {
  stiffness: 345,
  damping: 40,
};

const rotaryStart = {
  top: "125%",
  opacity: 0,
};

const rotaryIn = {
  top: "0%",
  opacity: 1,
};
const rotaryOut = {
  top: "-125%",
  opacity: 0,
};

const sectionStart = document.getElementById("section-use-case-start");
const fixableHeaderContainer = sectionStart.querySelector(".fixable-container");

// TODO: If you resize the page this'll likely break by leaving 'ghost' imprints
// happening because i'm animating things imperatively
const scrolljackUseCases = (scroll) => {
  const offsets = [];
  const sections = document.querySelectorAll(".section-use-case");
  sections.forEach((section) => offsets.push(section.offsetTop));

  for (let i = 0; i < offsets.length - 1; i++) {
    const curOffset = offsets[i];
    const nextOffset = offsets[i + 1];
    if (scroll > curOffset && scroll < nextOffset) {
      const halfway = curOffset + ((nextOffset - curOffset) * 1) / 2;
      const curRotary = fixableHeaderContainer.querySelector(
        ".rotary-" + (i + 1)
      );
      const nextRotary = fixableHeaderContainer.querySelector(
        ".rotary-" + (i + 2)
      );
      const curStyler = styler(curRotary);
      const nextStyler = styler(nextRotary);
      const activeIndex = window.scrolljackUseCasesIndex;
      if (scroll > halfway) {
        if (activeIndex !== i + 1) {
          window.scrolljackUseCasesIndex = i + 1;
          spring({
            from: rotaryIn,
            to: rotaryOut,
            ...springParams,
          }).start(curStyler.set);

          spring({
            from: rotaryStart,
            to: rotaryIn,
            ...springParams,
          }).start(nextStyler.set);
        }
      } else {
        if (activeIndex !== i) {
          window.scrolljackUseCasesIndex = i;
          spring({
            to: rotaryIn,
            from: rotaryOut,
            ...springParams,
          }).start(curStyler.set);

          spring({
            to: rotaryStart,
            from: rotaryIn,
            ...springParams,
          }).start(nextStyler.set);
        }
      }
    }
  }

  const sectionLast = sections[sections.length - 1];

  /* Fix header */
  if (sectionStart.offsetTop < scroll && sectionLast.offsetTop > scroll) {
    fixableHeaderContainer.classList.add("fixed");
    document.querySelector("body").appendChild(fixableHeaderContainer);
  } else {
    fixableHeaderContainer.classList.remove("fixed");
    sectionStart
      .querySelector("section-content")
      .prepend(fixableHeaderContainer);
  }

  /* Use regular inline headers when scrolled past section */
  if (sectionLast.offsetTop < scroll) {
    sectionLast.querySelector("h2 span").classList.remove("opacity-0");
    window.scrolljackUseCasesIndex = sections.length - 1;
  } else {
    sectionLast.querySelector("h2 span").classList.add("opacity-0");
  }
};

const scrolljackReset = () => {
  const rotaries = document.querySelectorAll(".rotary");
  rotaries.forEach((r, i) => {
    if (window.scrolljackUseCasesIndex == i) {
      r.style.top = "0%";
      r.style.opacity = 1;
    } else {
      r.style.top = "100%";
      r.style.opacity = 0;
    }
  });
};

// disable all
// document.addEventListener("scroll", (e) => {
//   const scroll = window.scrollY;
//   scrolljackUseCases(scroll);
// });

// window.addEventListener("load", (e) => {
//   const scroll = window.scrollY;
//   scrolljackUseCases(scroll);
//   scrolljackReset();
// });

// window.addEventListener("resize", (e) => {
//   const scroll = window.scrollY;
//   scrolljackUseCases(scroll);
//   scrolljackReset();
// });