Use a selection event

import ReactDOM from "react-dom";
import React from "react";

interface Context {
  api: {
    selection: {
      addToSelection: (
        ids: Array<number>,
        selectionPoolIdentifier: string,
        subPoolId?: number
      ) => void;
      removeFromSelection: (
        ids: Array<number>,
        selectionPoolIdentifier: string,
        subPoolId?: number
      ) => void;
      clearSelection: (
        selectionPoolIdentifier: string,
        subPoolId?: number,
        definitionNames?: Array<string>
      ) => void;
    };
  };
}

const onSelectionChanged = (evt: Event): void => {
  const { selectionPoolIdentifier, subPoolId, action, ids, definitionNames } = (
    evt as CustomEvent<{
      selectionPoolIdentifier: string;
      subPoolId?: number;
      action: "add" | "remove" | "clear";
      ids?: Array<number>;
      definitionNames: Array<string>;
    }>
  ).detail;

  alert(
    `selectionPoolIdentifier: ${selectionPoolIdentifier}, subPoolId: ${subPoolId}, action: ${action}, ids: ${ids}, definitionNames: ${definitionNames}`
  );
};

window.addEventListener("SELECTION_CHANGED", onSelectionChanged);

export default function createExternalRoot(container: HTMLElement) {
  return {
    render(context: Context) {
      const { addToSelection, removeFromSelection, clearSelection } =
        context.api.selection;
      const idsToAdd = [33379, 33380, 33378];
      const idsToRemove = [33379];
      const subPoolId = 35760;
      const selectionPoolIdentifier = "SelectionPool.Collection";
      const definitionNames = ["M.Asset"];

      ReactDOM.render(
        <>
          <button
            onClick={() => {
              addToSelection(idsToAdd, selectionPoolIdentifier, subPoolId);
            }}
          >
            Add to selection
          </button>
          <button
            onClick={() => {
              removeFromSelection(
                idsToRemove,
                selectionPoolIdentifier,
                subPoolId
              );
            }}
          >
            Remove from selection
          </button>
          <button
            onClick={() => {
              clearSelection(
                selectionPoolIdentifier,
                subPoolId,
                definitionNames
              );
            }}
          >
            Clear selection
          </button>
        </>,
        container
      );
    },
    unmount() {
      window.removeEventListener("SELECTION_CHANGED", onSelectionChanged);
      ReactDOM.unmountComponentAtNode(container);
    },
  };
}