export function initTimelineZoom() {
  const timelineWrap = document.querySelector(".timeline-wrap");
  const zoomButtons = document.querySelectorAll("[data-zoom]");

  if (!timelineWrap || !zoomButtons.length) {
    return;
  }

  const savedZoom = localStorage.getItem("tvguideTimelineZoom") || "2";

  const applyZoom = (zoom) => {
    timelineWrap.style.setProperty("--minute-width", `${zoom}px`);

    zoomButtons.forEach((button) => {
      button.classList.toggle("active", button.dataset.zoom === zoom);
    });

    localStorage.setItem("tvguideTimelineZoom", zoom);
  };

  zoomButtons.forEach((button) => {
    button.addEventListener("click", () => {
      applyZoom(button.dataset.zoom);
    });
  });

  applyZoom(savedZoom);
}

export function initTimelineDrag() {
  const timeline = document.querySelector(".timeline-wrap");

  if (!timeline) {
    return;
  }

  let isDragging = false;
  let startX = 0;
  let scrollLeft = 0;

  timeline.addEventListener("mousedown", (event) => {
    if (event.target.closest(".timeline-programme")) {
      return;
    }

    isDragging = true;
    timeline.classList.add("dragging");

    startX = event.pageX;
    scrollLeft = timeline.scrollLeft;
  });

  document.addEventListener("mouseup", () => {
    isDragging = false;
    timeline.classList.remove("dragging");
  });

  document.addEventListener("mousemove", (event) => {
    if (!isDragging) {
      return;
    }

    event.preventDefault();

    const walk = event.pageX - startX;
    timeline.scrollLeft = scrollLeft - walk;
  });
}