import debug from "debug";
import { html, LitElement } from "lit";
import { customElement, property } from "lit/decorators.js";
import { NamedNode } from "n3";
import { sortBy, uniq } from "underscore";
import { Patch } from "../../web/patch";
import { getTopGraph } from "../../web/RdfdbSyncedGraph";
import { SyncedGraph } from "../../web/SyncedGraph";

export { Light9CollectorDevice } from "../../web/collector/Light9CollectorDevice";
export { RdfdbSyncedGraph } from "../../web/RdfdbSyncedGraph";

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

@customElement("light9-collector-ui")
export class Light9CollectorUi extends LitElement {
  graph!: SyncedGraph;
  render() {
    return html`<rdfdb-synced-graph></rdfdb-synced-graph>
      <h1>Collector <a href="metrics">[metrics]</a></h1>

      <h2>Devices</h2>
      <div style="column-width: 11em">${this.devices.map((d) => html`<light9-collector-device uri="${d.value}"></light9-collector-device>`)}</div> `;
  }

  @property() devices: NamedNode[] = [];

  constructor() {
    super();
    getTopGraph().then((g) => {
      this.graph = g;
      this.graph.runHandler(this.findDevices.bind(this), "findDevices");
    });
  }

  findDevices(patch?: Patch) {
    const U = this.graph.U();

    this.devices = [];
    let classes = this.graph.subjects(U("rdf:type"), U(":DeviceClass"));
    uniq(sortBy(classes, "value"), true).forEach((dc) => {
      sortBy(this.graph.subjects(U("rdf:type"), dc), "value").forEach((dev) => {
        this.devices.push(dev as NamedNode);
      });
    });
  }
}