@customElement("light9-ascoltami-ui")

export class Light9AscoltamiUi extends LitElement {

  graph!: SyncedGraph;

  @property() show: NamedNode | null = null;

  @property() song: NamedNode | null = null;

  @property() selectedSong: NamedNode | null = null;

  @property() viewState: PlainViewState | null = null;

  @property() host: any;

  @property() playerState: PlayerState = { duration: null, endOfSong: null, pausedSongTime: null, playing: null, song: null, wallStartTime: null };

  @property() playerTime: number = 0;

  static styles = [

    css`

      :host {

        display: flex;

        flex-direction: column;

      }

      .keyCap {

        color: #ccc;

        background: #525252;

        display: inline-block;

        border: 1px outset #b3b3b3;

        padding: 2px 3px;

        margin: 3px 0;

        margin-left: 0.4em;

        font-size: 16px;

        box-shadow: 0.9px 0.9px 0px 2px #565656;

        border-radius: 2px;

      }

      button {

        min-height: 48pt;

        min-width: 65pt;

      }

      #mainRow {

        display: flex;

        flex-direction: row;

      }

      light9-song-listing {

        flex-grow: 1;

      }

      th {

        text-align: right;

      }

    `,

  ];

  constructor() {

    super();

    getTopGraph().then((g) => {

      this.graph = g;

      this.graph.runHandler(this.updatePlayState.bind(this), "playstate-ui");

    });

    setInterval(this.updateT.bind(this), 100);

  }

  protected async firstUpdated(_changedProperties: PropertyValues<this>) {

    this.bindKeys();

    const config = await (await fetch("/service/ascoltami/config")).json();

    document.title = document.title.replace("{{host}}", config.host);

    this.host = config.host;

  }

  updatePlayState() {

    const U = this.graph.U();

    const asco = U(":ascoltami");

    this.playerState = {

      duration: this.graph.optionalFloatValue(asco, U(":duration")),

      endOfSong: this.graph.optionalBooleanValue(asco, U(":endOfSong")),

      pausedSongTime: this.graph.optionalFloatValue(asco, U(":pausedSongTime")),

      wallStartTime: this.graph.optionalFloatValue(asco, U(":wallStartTime")),

      playing: this.graph.optionalBooleanValue(asco, U(":playing")),

      song: this.graph.optionalUriValue(asco, U(":song")),

    };

    this.updateT();

  }

  updateT() {

    if (this.playerState.wallStartTime !== null) {

      this.playerTime = Date.now() / 1000 - this.playerState.wallStartTime;

    } else if (this.playerState.pausedSongTime !== null) {

      this.playerTime = this.playerState.pausedSongTime;

    } else {

      this.playerTime = 0;

    }

  }

  render() {

    return html`

      <h1>ascoltami on ${this.host}</h1>

      <span><rdfdb-synced-graph></rdfdb-synced-graph></span>

        <light9-song-listing

          @selectsong=${(ev: any) => {

            this.selectedSong = ev.detail.song;

          }}

          .selectedSong=${this.selectedSong}

        <div>

          <light9-ascoltami-timeline .playerState=${this.playerState} .playerTime=${this.playerTime}></light9-ascoltami-timeline>

          <div>

            <button ?disabled=${this.selectedSong == null} @click=${this.onLoadSelected}>Change to and play selected <span class="keyCap">l</span></button>

            <button ?disabled=${false} @click=${this.onCmdZero}>Seek to zero <span class="keyCap">z</span></button>

            <button ?disabled=${this.playerState.playing || this.playerState.song == null} @click=${this.onCmdPlay}>Play <span class="keyCap">p</span></button>

            <button ?disabled=${!this.playerState.playing} @click=${this.onCmdStop}>Stop <span class="keyCap">s</span></button>

            <button ?disabled=${true} @click=${this.onCmdGo}>Go <span class="keyCap">g</span></button>

          </div>

          ${this.renderPlayerStateTable()}

        </div>

      </div>

    `;

  }

  renderPlayerStateTable() {

    return html` <table>

      <tr>

        <th>duration</th>

        <td>${this.playerState.duration}</td>

      </tr>

      <tr>

        <th>endOfSong</th>

        <td>${this.playerState.endOfSong}</td>

      </tr>

      <tr>

        <th>pausedSongTime</th>

        <td>${this.playerState.pausedSongTime?.toFixed(3)}</td>

      </tr>

      <tr>

        <th>playing</th>

        <td>${this.playerState.playing}</td>

      </tr>

      <tr>

        <th>song</th>

        <td>${this.playerState.song?.value}</td>

      </tr>

      <tr>

        <th>wallStartTime</th>

        <td>${this.playerState.wallStartTime}</td>

      </tr>

      <tr>

        <th>t</th>

        <td>${this.playerTime.toFixed(3)}</td>

      </tr>

    </table>`;

  }

  onSelectSong(song: NamedNode, ev: MouseEvent) {