import "dockview-core/dist/styles/dockview.css";
import {
  createDockview,
  GroupPanelPartInitParameters,
  IContentRenderer,
  themeAbyss,
} from "dockview-core";

class Panel implements IContentRenderer {
  private readonly _element: HTMLElement;

  get element(): HTMLElement {
    return this._element;
  }

  constructor() {
    this._element = document.createElement("div");
    this._element.style.color = "white";
  }

  init(parameters: GroupPanelPartInitParameters): void {
    this._element.textContent = "Hello World";
    this._element.innerHTML = `
                Hello World<br>
                <button id="add-panel-btn">Add panel</button>
            `;
    this._element
      .querySelector("#add-panel-btn")
      ?.addEventListener("click", () => {
        // Find all group ids
        console.log(parameters);
        const groups = Array.from(
          parameters.containerApi.component._groups.keys()
        );
        const activeGroup = parameters.containerApi.component._activeGroup?.id;
        const others = groups.filter((g) => g !== activeGroup);
        const targetGroup = others.length
          ? others[others.length - 1]
          : activeGroup;
        const nextId = "panel_" + Math.random().toString(36);

        parameters.containerApi.addPanel({
          id: nextId,
          component: "default",
          title: `Panel ${nextId}`,
          position: {
            referenceGroup: targetGroup,
            direction: "within",
          },
        });
      });
  }
}

const api = createDockview(document.getElementById("app"), {
  theme: themeAbyss,
  createComponent: (options) => {
    switch (options.name) {
      case "default":
        return new Panel();
    }
  },
});

api.addPanel({
  id: "panel_1",
  component: "default",
  title: "Panel 1",
});

api.addPanel({
  id: "panel_2",
  component: "default",
  position: { referencePanel: "panel_1", direction: "right" },
  title: "Panel 2",
});