import debug from "debug";

import { html, LitElement } from "lit";

import { sortBy, uniq } from "underscore";

import { SyncedGraph } from "../../web/SyncedGraph";

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

debug.enable("*");

const log = debug("collector");

@customElement("light9-collector-ui")

  render() {

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

      <h2>Devices</h2>

}

  @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 = [];

import debug from "debug";

import { html, LitElement, css } from "lit";

import { customElement, property } from "lit/decorators.js";

import { Patch } from "./patch";

import { SyncedGraph } from "./SyncedGraph";

const log = debug("syncedgraph-el");

let setTopGraph: (sg: SyncedGraph) => void;

(window as any).topSyncedGraph = new Promise<SyncedGraph>((res, rej) => {

  setTopGraph = res;

});

// Contains a SyncedGraph,

// displays a little status box,

// and emits 'changed' events with the graph and latest patch when it changes

@customElement("rdfdb-synced-graph")

export class RdfdbSyncedGraph extends LitElement {

  @property() graph: SyncedGraph;

      this.testGraph ? null : "/rdfdb/api/syncedGraph",

      {

        "": "http://light9.bigasterisk.com/",

        dev: "http://light9.bigasterisk.com/device/",

        rdf: "http://www.w3.org/1999/02/22-rdf-syntax-ns#",

        rdfs: "http://www.w3.org/2000/01/rdf-schema#",

        xsd: "http://www.w3.org/2001/XMLSchema#",

      },

      (s: string) => {

        this.status = s;

      },

      this.onClear.bind(this),

    );

    setTopGraph(this.graph);

  }

}

export async function getTopGraph(): Promise<SyncedGraph> {

  const s = (window as any).topSyncedGraph;

  return await s;

}

  // later.

  //

  // Note that _applyPatch is the only method to write to the graph, so

  // it can fire subscriptions.

  constructor(

    // url is the /syncedGraph path of an rdfdb server.

    public url: any,

    // prefixes can be used in Uri(curie) calls.

    public prefixes: { [short: string]: string },

    private setStatus: any,

    // called if we clear the graph

  ) {

    this.graph = new N3.Store();

    this._autoDeps = new AutoDependencies();

    this.clearGraph();

    this._client = new RdfDbClient(this.url, this._clearGraphOnNewConnection.bind(this), this._applyPatch.bind(this), this.setStatus);

  }

  clearGraph() {

    // just deletes the statements; watchers are unaffected.

    this.cachedFloatValues = new Map(); // s + '|' + p -> number

    this.cachedUriValues = new Map(); // s + '|' + p -> Uri

    this.cachedFloatValues.clear();

    this.cachedUriValues.clear();

    for (let quad of Array.from(patch.dels)) {

      //log("remove #{JSON.stringify(quad)}")

      const did = this.graph.removeQuad(quad);

    }

    //log("removed: #{did}")

    for (let quad of Array.from(patch.adds)) {

      this.graph.addQuad(quad);

    }

    log("applied patch locally", patchSizeSummary(patch));

    this._autoDeps.graphChanged(patch);

  }

  getObjectPatch(s: N3.NamedNode, p: N3.NamedNode, newObject: N3.Quad_Object, g: N3.NamedNode): Patch {

    // make a patch which removes existing values for (s,p,*,c) and

    // adds (s,p,newObject,c). Values in other graphs are not affected.

    const existing = this.graph.getQuads(s, p, null, g);

    return {

      dels: existing,

      adds: [this.Quad(s, p, newObject, g)],

    };

  }

import debug from "debug";

import { css, html, LitElement } from "lit";

import { customElement, property } from "lit/decorators.js";

import { NamedNode } from "n3";

debug.enable("*");

const log = debug("device-el");

@customElement("light9-collector-device")

export class Light9CollectorDevice extends LitElement {

  static styles = [

    css`

      :host {

        display: block;

        break-inside: avoid-column;

        font-size: 80%;

      }

      </table>

    `;

  }

  @property({

    // todo don't rebuild uri; pass it right

    converter: (s: string | null) => new NamedNode(s || ""),

  })

  uri: NamedNode = new NamedNode("");

  @property() attrs: Array<{ attr: string; valClass: string; val: string; chan: string }> = [];

  constructor() {

    super();

  }

  //  observers: [

  //    "initUpdates(updates)",

  //  ],

  // initUpdates(updates) {

  //   updates.addListener(function (msg) {

  //     if (msg.outputAttrsSet && msg.outputAttrsSet.dev == this.uri.value) {

  //       this.set("attrs", msg.outputAttrsSet.attrs);

  //       this.attrs.forEach(function (row) {

  //         row.valClass = row.val == 255 ? "full" : row.val ? "nonzero" : "";

  //       });

  //     }