import type { App, Component, DefineComponent } from "vue";

export const cards = {} as Record<string, Component>;

export async function compileCards(app: App<any>) {
  const svgs = import.meta.glob("@/assets/images/cards/heron-svg/*.svg", {
    eager: true,
  });

  // const components = await Promise.all(
  //   Object.entries(svgs).map(async ([k, v]) => {
  //     const regex = /([\d]+)(?=\.svg)/gm;
  //     const url = (v as any).default as string;
  //     let template = await (await fetch(url)).text();
  //     let arrayTemplate = template.split("\n");
  //     arrayTemplate.splice(0, 1);
  //     template = arrayTemplate.join("\n");

  //     return [
  //       k.match(regex)![0],
  //       defineComponent({
  //         props: ["used_effects_indexes", "card"],
  //         setup(_props) {
  //           const count = ref(0);
  //           return { count };
  //         },
  //         methods: {
  //           effectClick(effect: number) {
  //             this.$emit("effectClick", effect);
  //           },
  //         },
  //         template: template,
  //       }),
  //     ];
  //   })
  // );

  const components = await Promise.all(
    Object.entries(svgs).map(async ([k, v]) => {
      const regex = /([\d]+)(?=\.svg)/gm;
      const url = (v as any).default as string;
      try {
        let template: string;
        if (process.dev && !process.client) {
          template = (await import(k + "?raw" /* @vite-ignore */)).default;
        } else {
          template = await (await fetch(url)).text();
        }

        let arrayTemplate = template.split("\n");
        arrayTemplate.splice(0, 1);
        template = arrayTemplate.join("\n");
        return [
          Number(k.match(regex)![0]).toString(),
          markRaw(
            defineAsyncComponent({
              loader: async () =>
                defineComponent({
                  props: ["used_effects_indexes", "card"],
                  methods: {
                    effectClick(effect: number) {
                      this.$emit("effectClick", effect);
                    },
                  },
                  template: template,
                }),
            })
          ),
        ];
      } catch (e) {
        console.error(e, k);
        return [];
      }
      // let arrayTemplate = template.split("\n");
      // arrayTemplate.splice(0, 1);
      // template = arrayTemplate.join("\n");
    })
  );

  Object.assign(cards, Object.fromEntries(components));
}