<main>
  <div id="now-playing">Loading tracks ...</div>
  <button>⏭</button>
</main>

<style>
  @import "./styles/base.css";
  @import "./styles/diffuse/page.css";
</style>

<script type="module">
  import foundation from "./common/constituents/foundation.js";
  import { computed, effect } from "./common/signal.js";

  const components = foundation.assemblage.queueManagement();
  const queue = components.engine.queue;

  const isLoadingTracks = computed(() => {
    return components.orchestrator.output.tracks.state() !== "loaded";
  });

  effect(() => {
    const currentlyPlaying = queue.now();
    const tags = currentlyPlaying?.tags;

    const element = document.querySelector("#now-playing");
    if (!element) return;

    if (currentlyPlaying) {
      element.innerText = `${tags.artist} - ${tags.title}`;
    } else if (isLoadingTracks()) {
      // Keep original text
    } else {
      element.innerText = "Nothing is playing yet";
    }
  });

  document.body.querySelector("button").onclick = () => {
    queue.shift();
  };
</script>
