import { shallowReadonly } from "vue";
import { Attrib, EntityClass } from "./type";
import { Container } from "./packages/container";

export const register = <T extends string, R extends Attrib>(types: {
  [key in T]: EntityClass<R>;
}) => {
  const initBoard = (dom: HTMLDivElement, data?: { [key in T]?: R[] }) => {
    const container = new Container({
      dom,
      types,
      data,
    });
    container.init();

    return {
      stage: container,
      setData(newData: { [key in T]?: R[] }) {
        container.setData(newData);
      },
      getData() {
        return shallowReadonly(container.data);
      },
      destory() {
        container.destory();
      },
    };
  };
  return initBoard;
};