import debug from "debug";
import { LitElement, css, html } from "lit";
import { customElement, property } from "lit/decorators.js";
import { SyncedGraph } from "./SyncedGraph";

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

// Contains a SyncedGraph. Displays as little status box.
// Put one element on your page and use getTopGraph everywhere.
@customElement("rdfdb-synced-graph")
export class RdfdbSyncedGraph extends LitElement {
  @property() graph: SyncedGraph;
  @property() status: string;
  @property() testGraph = false;
  static styles = [
    css`
      :host {
        display: inline-block;
        border: 1px solid gray;
        min-width: 22em;
        background: #05335a;
        color: #4fc1d4;
      }
    `,
  ];
  render() {
    return html`graph: ${this.status}`;
  }

  constructor() {
    super();
    this.status = "startup";
    const prefixes = new Map<string, string>([
      ["", "http://light9.bigasterisk.com/"],
      ["dev", "http://light9.bigasterisk.com/device/"],
      ["effect", "http://light9.bigasterisk.com/effect/"],
      ["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#"],
    ]);
    this.graph = new SyncedGraph(
      this.testGraph ? "unused" : "/service/rdfdb/syncedGraph",
      prefixes,
      (s: string) => {
        this.status = s;
      }
    );
    setTopGraph(this.graph);
  }
}

// todo: consider if this has anything to contribute:
// https://github.com/webcomponents-cg/community-protocols/blob/main/proposals/context.md
let setTopGraph: (sg: SyncedGraph) => void;
(window as any).topSyncedGraph = new Promise<SyncedGraph>((res, rej) => {
  setTopGraph = res;
});

export async function getTopGraph(): Promise<SyncedGraph> {
  const s = (window as any).topSyncedGraph;
  return await s;
}