const root = document.documentElement;
const gallery = document.getElementById("gallery");
const cardCollection = document.getElementsByClassName("card");
const prevButton = document.getElementsByClassName("previous")[0];
const nextButton = document.getElementsByClassName("next")[0];
const dotContainer = document.getElementById("dots");
let currentOffset = 0;
let maxGalleryShift = -(220 * (cardCollection.length - 1));

// Setup Dots //

for (let i=0; i < cardCollection.length ; i++) {
    let li = document.createElement("li");
    dotContainer.appendChild(li);
}

const dotCollection = dotContainer.querySelectorAll("li");

// Click Handlers //

const bumperCheck = () => {
    if (currentOffset === 0) {
        prevButton.classList.add("disabled");
    } else if (currentOffset === maxGalleryShift) {
        nextButton.classList.add("disabled");
    }
}

const handlePrev = () => {
    currentOffset = currentOffset < 0 ? (currentOffset + 220) : 0;
    root.style.setProperty("--x-offset", `${currentOffset}px`);
    bumperCheck();
    nextButton.classList.remove("disabled");
}

const handleNext = () => {
    currentOffset = currentOffset > maxGalleryShift ? (currentOffset - 220) : maxGalleryShift;
    root.style.setProperty("--x-offset", `${currentOffset}px`);
    bumperCheck();
    prevButton.classList.remove("disabled");
}

prevButton.onclick = handlePrev;
nextButton.onclick = handleNext;

// Intersection Observer //

//Setup Observer
  const observerOptions = {
    root: null,
    rootMargin: "0px -20px 0px -20px",
    threshold: 0.6,
  };
  
  const handleObserverTrigger = entries => {
    let position;
    entries.forEach(entry => {
      position = entry.target.dataset.index;
      if (entry.isIntersecting) {
        dotCollection[position].classList.add("active");
      } else {
        dotCollection[position].classList.remove("active");
      }
    });
  };
  
  const observer = new IntersectionObserver(
    handleObserverTrigger,
    observerOptions
  );
  
  for (let i = 0; i < cardCollection.length; i++) {
      observer.observe(cardCollection[i]);
      cardCollection[i].setAttribute("data-index", i);
    };