import debug from "debug";
import { html, LitElement } from "lit";
import { customElement, property } from "lit/decorators.js";
import ReconnectingWebSocket from "reconnectingwebsocket";
import { sortBy, uniq } from "underscore";

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

class Updates {
  constructor() {
    this.listeners = [];
  }
  addListener(cb) {
    this.listeners.push(cb);
  }
  onMessage(msg) {
    this.listeners.forEach(function (lis) {
      lis(msg);
    });
  }
}

@customElement("light9-collector-ui")
export class Light9CollectorUi extends LitElement {
  static styles = [];
  render() {
    return html`
      <rdfdb-synced-graph graph="{{graph}}"></rdfdb-synced-graph>

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

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

  @property() graph: Object = {};
  @property() updates: Updates;
  @property() devices: Array<string> = [];
  //  observers: [
  //    'onGraph(graph)',
  //  ],

  constructor() {
    super();
    this.updates = new Updates();
    const ws = new ReconnectingWebSocket(location.href.replace("http", "ws") + "api/updates");
    ws.addEventListener("message", (ev: any) => {
      log("ws msg", ev);
      this.updates.onMessage(ev.data);
    });
  }

  onGraph(graph) {
    this.graph.runHandler(this.findDevices.bind(this), "findDevices");
  }

  findDevices() {
    var U = function (x) {
      return this.graph.Uri(x);
    };
    this.set("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.push("devices", dev);
      });
    });
  }
}