Playlist

import { newEvent } from "@/lib/newEvent";
import { nowPlayingMarkerSvg } from "@/registry/html/icons";
import { BwPlayerConsumer } from "@/registry/html/PlayerProvider";

export class BwPlaylist extends BwPlayerConsumer {
  _list = null;
  _listener = null;
  _content = null;
  _contentIndex = null;

  constructor() {
    super();
    this._list = document.createElement("ul");
    this._list.style.listStyle = "none";
    this._list.style.margin = "0";
    this._list.style.padding = "0";
  }

  #render() {
    const content = this._player?.content ?? [];
    const contentIndex = this._player?.contentIndex;

    if (content === this._content && contentIndex === this._contentIndex) return;
    this._content = content;
    this._contentIndex = contentIndex;

    this._list.replaceChildren(
      ...content.map((item, index) => {
        const btn = document.createElement("button");
        btn.setAttribute("aria-current", contentIndex === index);
        btn.setAttribute("aria-label", `Play ${item.title}`);
        btn.style.display = "flex";
        btn.style.alignItems = "center";
        btn.style.gap = "0.5rem";
        btn.style.width = "100%";
        btn.addEventListener("click", () => {
          if (!this._player) return;
          this._player.onEvent(
            newEvent({
              type: "PressedPlaylistItem",
              description: "A playlist item was pressed.",
              index,
            }),
          );
        });

        const marker = document.createElement("span");
        marker.style.display = "inline-flex";
        marker.style.width = "1rem";
        marker.style.justifyContent = "center";
        if (contentIndex === index) {
          marker.innerHTML = nowPlayingMarkerSvg(16);
        } else {
          marker.textContent = index + 1;
        }

        const title = document.createElement("span");
        title.textContent = item.title;

        btn.append(marker, title);

        const li = document.createElement("li");
        li.appendChild(btn);
        return li;
      }),
    );
  }

  connectedCallback() {
    super.connectedCallback();
    this._listener = this._player?.addEventListener("<any>", () => this.#render());
    this.#render();
    this.appendChild(this._list);
  }

  disconnectedCallback() {
    this._player?.removeEventListener("<any>", this._listener);
    this._listener = null;
    super.disconnectedCallback();
  }
}

customElements.define("bw-playlist", BwPlaylist);