---
import PageLayout from "../layouts/PageLayout.astro";
import { getCollection } from "astro:content";
import Track from "../components/Track.astro";

const tracks = await getCollection("tracks");
---

<PageLayout
  title={`Tracks (${tracks.length})`}
  description="My entire music playlist. It contains all kinds of songs."
>
  <div id="loading-indicator" class="flex flex-col items-center gap-2">
    <div
      class="h-8 w-8 animate-spin rounded-full border-4 border-neutral-300 border-t-neutral-900 dark:border-neutral-600 dark:border-t-white"
    >
    </div>
    <span
      id="loading-percentage"
      class="text-sm text-neutral-900 dark:text-white">0%</span
    >
  </div>
  <div id="tracks-container" class="not-prose hidden">
    {
      tracks.map(({ data: { title, artist, album, youtubeLink } }, index) => (
        <Track {title} {artist} {album} {youtubeLink} index={++index} />
      ))
    }
  </div>
</PageLayout>

<script is:inline define:vars={{ tracks }}>
  const loadThumbnails = async () => {
    const thumbnailUrls = tracks.map(({ data: { youtubeLink } }) => {
      const videoId = youtubeLink.split("v=")[1];
      return `https://img.youtube.com/vi/${videoId}/maxresdefault.jpg`;
    });

    let loadedCount = 0;
    const total = thumbnailUrls.length;
    const percentageEl = document.getElementById("loading-percentage");

    const preloadImages = thumbnailUrls.map((url) => {
      return new Promise((resolve) => {
        const img = new Image();
        const handleComplete = () => {
          loadedCount++;
          const percentage = Math.round((loadedCount / total) * 100);
          percentageEl.textContent = `${percentage}%`;
          resolve();
        };

        img.addEventListener("load", handleComplete, { once: true });
        img.addEventListener("error", handleComplete, { once: true });
        img.src = url;
      });
    });

    await Promise.all(preloadImages);

    document.getElementById("loading-indicator").classList.add("hidden");
    document.getElementById("tracks-container").classList.remove("hidden");
  };

  loadThumbnails();
  document.addEventListener("astro:after-swap", loadThumbnails);
</script>
