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

@customElement("collector-state")
export class CollectorState extends LitElement {
  @property() latestState: { graphClients: any } ;

  constructor() {
    super();
    this.latestState = { graphClients: {} };
    this.refresh();
  }

  delayedRefresh() {
    setTimeout(() => {
      requestAnimationFrame(() => {
        this.refresh();
      });
    }, 5000);
  }

  refresh() {
    fetch("state")
      .then((response) => {
        return response.json();
      })
      .then((newState) => {
        this.latestState = newState;
        this.delayedRefresh();
      });
  }

  static get styles() {
    return css`
      :host {
        display: inline-block;
        border: 2px solid gray;
        padding: 5px;
      }
    `;
  }

  render() {
    const sourcesTable = (clients: Array<any>) => {
      const clientRow = (client: any) => {
        const d = client;
        const now = Date.now() / 1000;
        const dispSec = (sec: number) =>
          Math.abs(sec) > now - 1
            ? "--"
            : Math.abs(sec) > 3600
            ? `${Math.round(sec / 3600)} hr`
            : Math.abs(sec) > 60
            ? `${Math.round(sec / 60)} min`
            : `${Math.round(sec * 10) / 10} sec`;
        return html`
          <tr>
            <td><a href="${d.url.replace("/events", "")}">[browse]</a> <a href="${d.url}">${d.url}</a></td>
            <td>${d.fullGraphReceived}</td>
            <td>${d.patchesReceived}</td>
            <td>${dispSec(d.time.open - now)}</td>
            <td>${dispSec(d.time.fullGraph - d.time.open)}</td>
            <td>${dispSec(d.time.latestPatch - now)}</td>
          </tr>
        `;
      };

      return html`
      rendered!
        <table>
          <thead>
            <tr>
              <th>patch source</th>
              <th>full graph recv</th>
              <th>patches recv</th>
              <th>time open (rel)</th>
              <th>time fullGraph (after open)</th>
              <th>time latest patch (rel)</th>
            </tr>
          </thead>
          <tbody>
            ${clients.map(clientRow)}
          </tbody>
        </table>
      `;
    };

    const handlersTable = (handlers: Array<any>) => {
      const handlerRow = (d: any) => {
        return html`
          <tr>
            <td>${d.created}</td>
            <td>${d.ageHours}</td>
            <td><a href="graph/${d.streamId}">${d.streamId}</a></td>
            <td>${d.foafAgent}</td>
            <td>${d.userAgent}</td>
          </tr>
        `;
      };

      return html`
        <table>
          <thead>
            <tr>
              <th>created</th>
              <th>age hours</th>
              <th>stream</th>
              <th>foaf agent</th>
              <th>user agent</th>
            </tr>
          </thead>
          <tbody>
            ${handlers.map(handlerRow)}
          </tbody>
        </table>
      `;
    };

    if (!this.latestState) {
      return "loading...";
    }
    const d = this.latestState.graphClients;
    return html` <div>
      <p>Graph: ${d.statements ? d.statements.len : 0} statements</p>

      <p>Sources: ${sourcesTable(d.clients || [])}</p>

      <p>Listening clients: ${handlersTable(d.sseHandlers || [])}</p>
    </div>`;
  }
}