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>([