class MediaPlayer extends Base {
  updateState(state) {
    this.name = (state.attributes || {}).media_title || (state.attributes || {}).friendly_name || this.id;
    this.state = state;
    this.render();
  }

  getControls() {
    const controlDiv = document.createElement("div");
    controlDiv.id = `control-${this.id}`;
    controlDiv.classList.add("media_player_control");

    const previous = this.getButton("step-backward");
    previous.onclick = () => {
      this.mm.sendSocketNotification("MEDIA_PLAYER_PREVIOUS", {
        entity: this.id,
      });
    };
    controlDiv.appendChild(previous);

    let playPause = this.getButton("play");
    if (this.state.state === "playing") {
      playPause = this.getButton("pause");
    }
    playPause.onclick = () => {
      this.mm.sendSocketNotification("MEDIA_PLAYER_PLAYPAUSE", {
        entity: this.id,
      });
    };
    controlDiv.appendChild(playPause);

    const next = this.getButton("step-forward");
    next.onclick = () => {
      this.mm.sendSocketNotification("MEDIA_PLAYER_NEXT", {
        entity: this.id,
      });
    };
    controlDiv.appendChild(next);

    return controlDiv;
  }

  getButton(icon) {
    const button = document.createElement("div");
    button.innerHTML = `<i class="fas fa-${icon}"></i>`;
    return button;
  }

  render() {
    super.render();
    const container = document.getElementById(this.id);
    if (container) {
      container.appendChild(this.getControls());
    }
    console.log(this.state)
    container.style.backgroundImage = `url("${this.mm.config.host}:${this.mm.config.port}${this.state.attributes.entity_picture}")`
  }
}