import { markRaw, reactive } from "vue";
import { images } from "../board/useBoard";

const componentLoads = import.meta.glob("./*.vue");

export const components: { [key in string]: any } = reactive({});

const map = {
  label: ["Circle", "Rectangle", "Wall"],
  image: images,
};

Object.entries(componentLoads).map(([name, fn]) => {
  name = name.substring(2, name.lastIndexOf(".vue"));
  fn().then((mudule) => {
    const component = (mudule as any).default;
    markRaw(component as any);
    const keys = [name, ...(map[name] ? map[name] : [])];
    keys.forEach((name) => {
      components[name] = component;
      components[name.slice(0, 1).toUpperCase() + name.slice(1)] = component;
    });
  });
});