import { createElement } from 'react';
import { createRoot } from 'react-dom/client';
import App from './App';

class TFDiDesignMD11LoadManagerPanel extends TemplateElement {
  private commBus: ViewListener.ViewListener | undefined;

  constructor() {
    super();
  }

  connectedCallback() {
    super.connectedCallback();

    this.commBus = RegisterViewListener('JS_LISTENER_COMM_BUS');

    const container = document.getElementById('react');
    if (container) {
      console.log('Starting React');
      const root = createRoot(container);
      root.render(createElement(App, { commBus: this.commBus }));
    }
  }

  disconnectedCallback() {
    super.disconnectedCallback();

    this.commBus?.unregister();
  }
}

window.customElements.define('tfdidesign-md11-load-manager-panel', TFDiDesignMD11LoadManagerPanel);
checkAutoload();