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

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

export async function compileCards() {
  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;
      try {
        let template: string;
        if (process.dev && !process.client) {
          template = (await import(/* @vite-ignore */ k + "?raw")).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", "cardId"],
          //         methods: {
          //           effectClick(effect: number) {
          //             this.$emit("effectClick", effect);
          //           },
          //         },
          //         template: template,
          //       }),
          //   })
          // ),
          markRaw(
            defineComponent({
              props: ["used_effects_indexes", "cardId"],
              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));
}

export async function compileTokens() {
  const svgs = import.meta.glob("@/assets/images/tokens/*.svg", {
    eager: true,
  });

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

        let arrayTemplate = template.split("\n");
        arrayTemplate.splice(0, 1);
        template = arrayTemplate.join("\n");
        return [
          k.match(regex)![0].toString(),
          markRaw(
            defineComponent({
              template: template,
            })
          ),
        ];
      } catch (e) {
        console.error(e, k);
        return [];
      }
    })
  );
  Object.assign(tokens, Object.fromEntries(components));
}