---
import { Image } from "astro:assets";

import Base from "@layouts/Base.astro";
import MusicPlayer from "@components/MusicPlayer.astro";
import Song from "@components/Song.astro";

import { SITE_TITLES, SITE_DESCRIPTIONS, WEBRINGS, FRIENDS } from "@lib/consts";
---

<Base
  title={SITE_TITLES.friends}
  description={SITE_DESCRIPTIONS.friends}
  image="/friends.png"
>
  <div
    class="flex md:flex-row flex-col items-start px-6 gap-24 mt-52 mb-18 md:my-0"
  >
    <MusicPlayer
      nowPlaying={WEBRINGS[0].name}
      playPercent={20}
      playPositon="0:20"
      playLength="1:00"
    />

    <section class="flex flex-col gap-8 w-full md:w-md">
      <div>
        <h2 class="text-xl">Up next</h2>
        <ul class="flex flex-col mt-4">
          {
            WEBRINGS.entries().map(([i, webring]) => (
              <Song id={`webring-${i}`} index={i + 1} title={webring.name} />
            ))
          }
        </ul>
      </div>

      <div>
        <h2 class="text-xl">Embed my badge</h2>
        <img src="/badges/me.gif" alt="isabel roses" width={88} height={31} />
      </div>

      <div>
        <h2 class="text-xl">Friends</h2>
        <div class="grid grid-cols-3 gap-2 b-16 items-start mt-4">
          {
            FRIENDS.map((friend) => (
              <a href={friend.link} target="_blank" rel="noopener noreferrer">
                <Image
                  src={friend.badge}
                  alt={friend.name}
                  width={88}
                  height={31}
                />
              </a>
            ))
          }
        </div>
      </div>
    </section>
  </div>

  <script is:inline define:vars={{ webrings: WEBRINGS }}>
    const playButton = document.getElementById("play");
    const backButton = document.getElementById("back");
    const skipButton = document.getElementById("skip");
    const title = document.getElementById("now-playing-title");

    webrings.forEach((_, i) => {
      const el = document.getElementById(`webring-${i}`);
      el.addEventListener("click", () => {
        currentIndex = i;
        updateNowPlaying();
      });
    });

    let currentIndex = 0;

    function updateNowPlaying() {
      title.textContent = webrings[currentIndex].name;
    }

    playButton.addEventListener("click", () => {
      location.href = webrings[currentIndex].href;
    });

    backButton.addEventListener("click", () => {
      location.href = webrings[currentIndex].href + webrings[currentIndex].prev;
    });

    skipButton.addEventListener("click", () => {
      location.href = webrings[currentIndex].href + webrings[currentIndex].next;
    });
  </script>
</Base>