import { TextField } from "./TextField";

export class NowPlaying extends HTMLElement {
  onStop: () => void;
  nameContainer: TextField;
  albumContainer: TextField;
  artistContainer: TextField;

  static get observedAttributes() {
    return ["name", "album", "artist"];
  }

  constructor() {
    super();

    this.nameContainer = document.createElement("text-field");
    this.nameContainer.classList.add("now-playing__name");

    this.albumContainer = document.createElement("text-field");
    this.albumContainer.classList.add("now-playing__album");

    this.artistContainer = document.createElement("text-field");
    this.artistContainer.classList.add("now-playing__artist");

    this.onStop = () => {};
  }

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

  set name(name: string | null) {
    if (name) {
      this.setAttribute("name", name);
      this.nameContainer.text = name;
    } else {
      this.removeAttribute("open");
      this.nameContainer.text = null;
    }
  }

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

  set artist(artist: string | null) {
    if (artist) {
      this.setAttribute("artist", artist);
      this.artistContainer.text = artist;
    } else {
      this.removeAttribute("open");
      this.artistContainer.text = null;
    }
  }

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

  set album(album: string | null) {
    if (album) {
      this.setAttribute("album", album);
      this.albumContainer.text = album;
    } else {
      this.removeAttribute("open");
      this.albumContainer.text = null;
    }
  }

  connectedCallback() {
    const container = document.createElement("data-card");
    container.classList.add("card");
    container.classList.add("card--recessed");
    container.classList.add("now-playing");

    container.appendChild(this.nameContainer);
    container.appendChild(this.albumContainer);
    container.appendChild(this.artistContainer);

    const stopButton = document.createElement("button");
    stopButton.innerHTML = "Stop";
    stopButton.addEventListener("click", (_) => {
      this.onStop();
    });

    this.appendChild(container);
    this.appendChild(stopButton);
  }
}