import { LitElement, TemplateResult, css, html } from "lit";
import { customElement, property } from "lit/decorators.js";
export { SgSource, SgView, StreamedGraph } from "@bigasterisk/streamed-graph";

@customElement("fd-page")
export class FdPage extends LitElement {
  static styles = [
    css`
      :host {
        display: flex;
        flex-direction: column;
        height: 100vh;
      }
      button {
        margin: 10px;
        padding: 20px;
      }
    `,
  ];
  @property() status: {} = { "loading...": "" };
  @property() lastCommand: {} = { command: "none" };
  connectedCallback(): void {
    super.connectedCallback();
    this.getStatus();
  }

  async getStatus() {
    this.status = await (await fetch("api/status")).json();
    setTimeout(() => {
      requestAnimationFrame(() => {
        this.getStatus();
      });
    }, 1000);
  }
  render() {
    return html`
      <h1>Front door lock</h1>

      <div>Status: ${JSON.stringify(this.status)} ${JSON.stringify(this.lastCommand)}</div>
      <div>
        <button @click=${() => this.simple("unlock")}>Unlock</button>
        <button @click=${() => this.simple("stayUnlocked")}>Unlock and stay unlocked</button>
        <button @click=${() => this.simple("lock")}>Lock</button>
      </div>
      <streamed-graph expanded="true">
        <sg-source url="./api/graph"></sg-source>
        <sg-source url="./view.n3"></sg-source>
        <sg-view uri="#view"></sg-view>
      </streamed-graph>
      <p>
        <a href="metrics">metrics</a> |
        <a href="api/graph">graph</a>
      </p>
      <bigast-loginbar></bigast-loginbar>
    `;
  }
  async simple(command: string) {
    const t1 = Date.now();
    this.lastCommand = { command: command, sentAt: t1 };
    var status;
    try {
      const resp = await fetch(`api/simple/${command}`, { method: "PUT" });
      status = resp.status;
    } catch (e) {
      status = "" + e;
    }
    const t2 = Date.now();
    this.lastCommand = { command: command, sentAt: t1, tookMs: t2 - t1, status: status };
  }
}