<h1> Scroll Snap Events in Action</h1>
<main>
  <div class="scroll-container">
  </div>
</main>
<div id="event-log">
</div>

h1 {
  text-align: center;
}

main {
  display: flex;
  align-items: center;
  justify-content: center;
  height: inherit;
}
.scroll-container {
  border: 3px solid black;
  width: 400px;
  height: 500px;
  overflow: scroll;
  scroll-snap-type: y mandatory;
}

.scroll-container div {
  border-radius: 5px;
  box-shadow: inset 1px 1px 4px rgb(255 255 255 / 0.5),
    inset -1px -1px 4px rgb(0 0 0 / 0.5);
  width: 200px;
  height: 200px;
  display: flex;
  align-items: center;
  justify-content: center;

  margin: 50px auto;
  scroll-snap-align: start;
  transition: 0.5s ease;
}

#event-log {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  background-color: #333;
  color: white;
  padding: 10px;
  font-family: monospace;
  max-height: 200px;
  overflow-y: auto;
}

.snap-incoming {
  background: radial-gradient(circle, #00ff00, #7cfc00, #32cd32);
}

.snap-active {
  background: radial-gradient(circle, #ff0030, #ff1744, #d32f2f);

  color: white;
}

const scrollContainer = document.querySelector(".scroll-container");
const eventLog = document.getElementById("event-log");

// Function to create grid boxes
function populateGrid(container, count) {
  container.innerHTML = Array.from(
    { length: count },
    (_, index) => `
    <div>
      <h2>Box ${index + 1}</h2>
    </div>
  `
  ).join("");
}

// event logging function
function updateEventLog(message) {
  eventLog.textContent = `Current Scroll Snap Event => ${message}`;
}

// using the snapChnaging event
scrollContainer.addEventListener("scrollsnapchanging", (event) => {
  const previousPending = document.querySelector(".snap-incoming");
  if (previousPending) {
    previousPending.classList.remove("snap-incoming");
  }
  event.snapTargetBlock.classList.add("snap-incoming");

  updateEventLog("Snap Changing");
});

// using the snapChange event

scrollContainer.addEventListener("scrollsnapchange", (event) => {
  const currentlySnapped = document.querySelector(".snap-active");
  if (currentlySnapped) {
    currentlySnapped.classList.remove("snap-active");
  }
  event.snapTargetBlock.classList.add("snap-active");
  updateEventLog("Snap Changed");
});

// Initialize the grid
populateGrid(scrollContainer, 11);