import * as React from "react";
import { createRoot } from "react-dom/client";
import * as FlexLayout from "flexlayout-react";
export { Light9DeviceSettings } from "./live/Light9DeviceSettings";
export { Light9CollectorUi } from "./collector/Light9CollectorUi";

const config:FlexLayout.IJsonModel = {
  global: {},
  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" }],
      },
    ],
  },
};

const e = React.createElement;

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

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

  factory = (node) => {
    var component = node.getComponent();
    return e(component, null, "");
  };

  render() {
    return e(FlexLayout.Layout, { model: this.state.model, factory: this.factory });
  }
}

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