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";

export { RdfdbSyncedGraph } from "./RdfdbSyncedGraph";

export { Light9CollectorUi } from "./collector/Light9CollectorUi";

export { Light9FadeUi } from "./fade/Light9FadeUi";

export { Light9DeviceSettings } from "./live/Light9DeviceSettings";

const log = debug("home");

const config: FlexLayout.IJsonModel = {

  global: {

    tabEnableRename: false,

  },

  borders: [],

  layout: {

    type: "row",

    weight: 100,

    children: [

      {

        type: "tabset",

        weight: 50,

        children: [{ type: "tab", name: "devsettings", component: "light9-device-settings" }],

      },

      {

        type: "tabset",

        weight: 50,

        children: [{ type: "tab", name: "collector", component: "light9-collector-ui" }],

      },

    ],

  },

};

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

// Store flexlayout panels in per-browser localstorage.

class PersistentLayout {

  key = "light9.home.layout";

  defaultLayout: FlexLayout.IJsonRowNode = {

    type: "row",

    children: [

      {

        type: "tabset",

        weight: 50,

        children: [{ type: "tab", name: "devsettings", component: "light9-device-settings" }],

      },

      {

        type: "tabset",

        weight: 50,

        children: [{ type: "tab", name: "devsettings", component: "light9-device-settings" }],

      },

    ],

  };

  getOrDefault(): FlexLayout.IJsonRowNode {

    let savedLayout = localStorage.getItem(this.key);

    if (savedLayout === null) {

      return this.defaultLayout;

    }

    return JSON.parse(savedLayout);

  }

  save(layout: FlexLayout.IJsonRowNode) {

    localStorage.setItem(this.key, JSON.stringify(layout));

  }

}

class Main extends React.Component {

  state: { model: FlexLayout.Model; persistence: PersistentLayout };

  constructor(props: any) {

    super(props);

    const persistence = new PersistentLayout();

    const config = {

      global: {

        tabEnableRename: false,

      },

      borders: [],

      layout: persistence.getOrDefault(),

    };

    this.state = { model: FlexLayout.Model.fromJson(config), persistence: persistence };

  }

  factory = (node: any) => {

    var component = node.getComponent();

    return React.createElement(component, null, "");

  };

  render() {

    return React.createElement(FlexLayout.Layout, {

      model: this.state.model,

      realtimeResize: true,

      onModelChange: this.onModelChange.bind(this),

      factory: this.factory,

    });

  }

  onModelChange() {

    this.state.persistence.save(this.state.model.toJson().layout);

  }

}

@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;

    });

  }

}

const root = createRoot(document.getElementById("container")!);

root.render(React.createElement(Main));