import type { Component } from "vue";
import Theme1 from "@/components/theme/Theme1.vue";
import Theme2 from "@/components/theme/Theme2.vue";
import Theme3 from "@/components/theme/Theme3.vue";
import Theme4 from "@/components/theme/Theme4.vue";
import Theme5 from "@/components/theme/Theme5.vue";
import Theme6 from "@/components/theme/Theme6.vue";
import PayTheme1 from "@/components/pay/PayTheme1.vue";
import PayTheme2 from "@/components/pay/PayTheme2.vue";
import PayTheme3 from "@/components/pay/PayTheme3.vue";
import PayTheme4 from "@/components/pay/PayTheme4.vue";
import PayTheme5 from "@/components/pay/PayTheme5.vue";
import PayTheme6 from "@/components/pay/PayTheme6.vue";

export type ThemeScene = "home" | "pay";

const homeThemeMap: Record<number, Component> = {
  1: Theme1,
  2: Theme2,
  3: Theme3,
  4: Theme4,
  5: Theme5,
  6: Theme6,
};

const payThemeMap: Record<number, Component> = {
  1: PayTheme1,
  2: PayTheme2,
  3: PayTheme3,
  4: PayTheme4,
  5: PayTheme5,
  6: PayTheme6,
};

export function resolveThemeComponent(scene: ThemeScene, themeId: number): Component {
  const normalizedThemeId = Number(themeId) || 1;
  const themeMap = scene === "home" ? homeThemeMap : payThemeMap;

  return themeMap[normalizedThemeId] || themeMap[1];
}