export class PlaylistRow extends HTMLElement {
  onPlay: (trackId: string) => void;

  static get observedAttributes() {
    return ["trackId"];
  }

  constructor() {
    super();
    this.onPlay = (_) => {};
  }

  get trackId(): string | null {
    return this.getAttribute("trackId");
  }

  set trackId(id: string | null) {
    id ? this.setAttribute("trackId", id) : this.removeAttribute("trackId");
  }

  connectedCallback() {
    this.classList.add("playlist-row");
    const playButton = document.createElement("button");
    playButton.innerHTML = "Play";

    playButton.addEventListener("click", (_) => {
      if (this.trackId) {
        this.onPlay(this.trackId);
      }
    });

    this.appendChild(playButton);
  }
}