import debug from "debug";
import * as FlexLayout from "flexlayout-react";
import { LitElement, html } from "lit";
import { customElement } from "lit/decorators.js";
import * as React from "react";
import { createRoot } from "react-dom/client";
import { getTopGraph } from "./RdfdbSyncedGraph";
import { SyncedGraph } from "./SyncedGraph";
import { Patch } from "./patch";
import { SimpleLayout, fullLayout, persistedLayout, simpleLayout } from "./tiledLayoutPersistence";
import { NamedNode } from "n3";
export { RdfdbSyncedGraph } from "./RdfdbSyncedGraph";
export { Light9CollectorUi } from "./collector/Light9CollectorUi";
export { Light9FadeUi } from "./fade/Light9FadeUi";
export { Light9DeviceSettings } from "./live/Light9DeviceSettings";
import { showRoot } from "./show_specific";
import { HandlerFunc } from "./AutoDependencies";
const log = debug("home");

const config: FlexLayout.IJsonModel = {
  global: {
    tabEnableRename: false,
  },
  borders: [],
  layout: fullLayout(persistedLayout) as FlexLayout.IJsonRowNode,
};

// see https://github.com/lit/lit/tree/main/packages/labs/react

class Main extends React.Component {
  state: { model: FlexLayout.Model };
  constructor(props: any) {
    super(props);
    this.state = { model: FlexLayout.Model.fromJson(config) };
  }

  factory = (node: any) => {
    var component = node.getComponent();
    return React.createElement(component, null, "");
  };

  render() {
    return React.createElement(FlexLayout.Layout, {
      model: this.state.model,
      realtimeResize: true,
      factory: this.factory,
    });
  }
}

@customElement("light9-home-status")
export class Light9HomeStatus extends LitElement {
  graph!: SyncedGraph;
  render() {
    return html`<rdfdb-synced-graph></rdfdb-synced-graph>
      <a href="metrics/">metrics</a> `;
  }
  constructor() {
    super();
    getTopGraph().then((g) => {
      this.graph = g;
      runHandlerAfterGraphLoads(this.graph, this.homeLayout.bind(this), "homeLayout");
    });
  }
  homeLayout(patch?: Patch) {
    const U = this.graph.U();
    const s = U(":homeLayout");
    const p = U(":config");
    let cfg;

    try {
      cfg = this.graph.stringValue(s, p);
    } catch (e) {
      const ctx = new NamedNode(showRoot + "/homeLayout");
      log(`no config in graph- adding one to `, ctx);
      cfg = JSON.stringify(persistedLayout);
      this.graph.patchObject(s, p, this.graph.Literal(cfg), ctx);
    }
    const fl = fullLayout(JSON.parse(cfg) as SimpleLayout);
    log("got config", fl);
  }
}

function runHandlerAfterGraphLoads(graph: SyncedGraph, handler: HandlerFunc, label: string) {
  let patchesSeen = 0;
  const wrapHandler = (patch?: Patch) => {
    patchesSeen += 1;
    if (patchesSeen == 2) {
      handler(patch);
    } else {
      graph.objects(null, null);
    }
  };

  graph.runHandler(wrapHandler, label);
}

const root = createRoot(document.getElementById("container")!);
root.render(React.createElement(Main));