import debug from "debug";
import { html, LitElement } from "lit";
import { customElement, property } from "lit/decorators.js";
import { NamedNode } from "n3";
import { getTopGraph } from "../web/RdfdbSyncedGraph";
import { SyncedGraph } from "../web/SyncedGraph";
export { RdfdbSyncedGraph } from "../web/RdfdbSyncedGraph";
export { Light9TimelineAudio } from "../web/light9-timeline-audio";
import { classMap } from "lit/directives/class-map.js";

debug.enable("*");
const log = debug("asco");

function byId(id: string): HTMLElement {
  return document.getElementById(id)!;
}
async function postJson(url: string, jsBody: Object) {
  return fetch(url, {
    method: "POST",
    headers: { "Content-Type": "applcation/json" },
    body: JSON.stringify(jsBody),
  });
}
@customElement("light9-ascoltami-ui")
export class Light9AscoltamiUi extends LitElement {
  graph!: SyncedGraph;
  times!: { intro: number; post: number };
  currentDuration: number = 0;
  @property() nextText: string = "";
  @property() isPlaying: boolean = false;
  render() {
    return html`<rdfdb-synced-graph></rdfdb-synced-graph>

      <link rel="stylesheet" href="./style.css" />

      <h1>ascoltami <a href="metrics">[metrics]</a></h1>

      <div class="commands">
        <button id="cmd-stop" @click=${this.onCmdStop} class="playMode ${classMap({ active: !this.isPlaying })}">
          <strong>Stop</strong>
          <div class="key">s</div>
        </button>
        <button id="cmd-play" @click=${this.onCmdPlay} class="playMode ${classMap({ active: this.isPlaying })}">
          <strong>Play</strong>
          <div class="key">p</div>
        </button>
        <button id="cmd-intro" @click=${this.onCmdIntro}>
          <strong>Skip intro</strong>
          <div class="key">i</div>
        </button>
        <button id="cmd-post" @click=${this.onCmdPost}>
          <strong>Skip to Post</strong>
          <div class="key">t</div>
        </button>
        <button id="cmd-go" @click=${this.onCmdGo}>
          <strong>Go</strong>
          <div class="key">g</div>
          <div id="next">${this.nextText}</div>
        </button>
      </div> `;
  }

  onCmdStop(ev?: MouseEvent): void {
    postJson("api/time", { pause: true });
  }
  onCmdPlay(ev?: MouseEvent): void {
    postJson("api/time", { resume: true });
  }
  onCmdIntro(ev?: MouseEvent): void {
    postJson("api/time", { t: this.times.intro, resume: true });
  }
  onCmdPost(ev?: MouseEvent): void {
    postJson("api/time", { t: this.currentDuration - this.times.post, resume: true });
  }
  onCmdGo(ev?: MouseEvent): void {
    postJson("api/go", {});
  }

  bindKeys() {
    document.addEventListener("keypress", (ev) => {
      if (ev.which == 115) {
        this.onCmdStop();
        return false;
      }
      if (ev.which == 112) {
        this.onCmdPlay();
        return false;
      }
      if (ev.which == 105) {
        this.onCmdIntro();
        return false;
      }
      if (ev.which == 116) {
        this.onCmdPost();
        return false;
      }

      if (ev.key == "g") {
        this.onCmdGo();
        return false;
      }
      return true;
    });
  }

  currentDurationChanged(newDuration: number): void {
    this.currentDuration = newDuration;
  }

  async musicSetup() {
    // shoveled over from the vanillajs version
    const config = await (await fetch("api/config")).json();
    this.times = config.times;
    document.title = document.title.replace("{{host}}", config.host);
    const h1 = document.querySelector("h1")!;
    h1.innerText = h1.innerText.replace("{{host}}", config.host);

    byId("nav").innerText = navigator.userAgent;
    var updateFreq = navigator.userAgent.indexOf("Linux") != -1 ? 10 : 2;
    if (navigator.userAgent.match(/Windows NT/)) {
      // helper laptop
      updateFreq = 10;
    }
    byId("updateReq").innerText = "" + updateFreq;

    (window as any).finishOldStyleSetup(
      this.times,
      updateFreq,
      this.currentDurationChanged.bind(this),
      (t: string) => {
        this.nextText = t;
      },
      (is: boolean) => {
        this.isPlaying = is;
      }
    );
  }

  constructor() {
    super();
    this.bindKeys();
    //   byId("cmd-stop").addEventListener("click", (ev: Event) =>
    // );

    getTopGraph().then((g) => {
      this.graph = g;
      this.musicSetup(); // async
    });
  }
}