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;

}