import {LitElement, html} from 'lit';
import {customElement, property} from 'lit/decorators.js';

// import { Store } from 'n3';


// import { GraphView } from './graph_view';
import { StreamedGraphClient } from './streamed_graph_client';
import { style, addFontToRootPage } from './style';

// export * from "./graph_queries";

// export interface VersionedGraph {
//   version: number;
//   store: Store;
// }

@customElement("streamed-graph")
export class StreamedGraph extends LitElement {

  @property({ type: String })
  url: string = "";

//   @property({ type: Object })
//   graph!: VersionedGraph;

  @property({ type: Boolean })
  expanded: boolean = false;


  @property({ type: String })
  status: string = "";

  sg!: StreamedGraphClient;
//   graphViewEl!: Element;
//   graphViewDirty = true;

  render()  {
    const expandAction = this.expanded ? '-' : '+';
  static styles=style;
    return html`
         <div id="ui">
           <span class="expander"
             ><button @click="${this.toggleExpand}">${expandAction}</button></span
           >
           StreamedGraph <a href="${this.url}">[source]</a>: ${this.status}
         </div>
         <div id="graphView"></div>
       `
     ;
   }

  connectedCallback() {
    super.connectedCallback();
//     const emptyStore = new Store();
//     this.graph = { version: -1, store: emptyStore };
//     this.graphViewEl = (this.shadowRoot as ShadowRoot).getElementById(
//       "graphView"
//     ) as Element;
    addFontToRootPage();

    this._onUrl(this.url); // todo: watch for changes and rebuild
    if (this.expanded) {
//       this.redrawGraph();
    }
  }

  toggleExpand() {
    this.expanded = !this.expanded;
//     if (this.expanded) {
//       this.redrawGraph();
//     } else {
//       this.graphViewDirty = false;
//       this._graphAreaClose();
//     }
  }

//   redrawGraph() {
//     this.graphViewDirty = true;
//     requestAnimationFrame(this._redrawLater.bind(this));
//   }

  _onUrl(url: string) {
    if (this.sg) {
      this.sg.close();
    }
    this.sg = new StreamedGraphClient(
      url,
      this.onGraphChanged.bind(this),
      (st) => {this.status = st},
      [], //window.NS,
      []
    );
  }

  onGraphChanged() {
//     this.graph = {
//       version: this.graph.version + 1,
//       store: this.sg.store
//     };
//     if (this.expanded) {
//       this.redrawGraph();
//     }
//     this.dispatchEvent(
//       new CustomEvent("graph-changed", { detail: { graph: this.graph } })
//     );
  }

//   _redrawLater() {
//     if (!this.graphViewDirty) return;

//     if ((this.graph as VersionedGraph).store && this.graph.store) {
//       this._graphAreaShowGraph(new GraphView(this.url, this.graph.store));
//       this.graphViewDirty = false;
//     } else {
//       this._graphAreaShowPending();
//     }
//   }

//   _graphAreaClose() {
//     render(null, this.graphViewEl);
//   }

//   _graphAreaShowPending() {
//     render(
//       html`
//         <span>waiting for data...</span>
//       `,
//       this.graphViewEl
//     );
//   }

//   _graphAreaShowGraph(graphView: GraphView) {
//     render(graphView.makeTemplate(), this.graphViewEl);
//   }
}

// // allow child nodes to combine a few graphs and statics
// //<streamed-graph id="timebankGraph"  graph="{{graph}}" expanded="true">
// //  <member-graph url="graph/timebank/events"></member-graph>
// //  <member-graph url="/some/static.n3"></member-graph>
// //</streamed-graph>