import type { Component } from 'vue';
import { markRaw } from 'vue';
const createComponentMap = (name: string) => ({
  pagePath: `./pages/${name}.vue`,
  fid: 1
});

// 组件列表配置
export const componentImportConfigs: any = [
  {
    name: '头部组件',
    icon: 'iconfont iconfuwenbenpc',
    id: 1,
    enabled: true,
    ...createComponentMap('head')
  },
  {
    name: '文本标题',
    icon: 'iconfont iconbiaotipc',
    id: 2,
    enabled: true,
    ...createComponentMap('textTitle')
  },
  {
    name: '图文导航',
    icon: 'iconfont icontuwendaohangpc',
    id: 3,
    enabled: true,
    ...createComponentMap('navigation')
  },
  {
    name: '图片魔方',
    icon: 'iconfont iconmofangpc',
    id: 4,
    enabled: true,
    ...createComponentMap('imageCube')
  },
  // {
  //   name: '活动魔方',
  //   icon: 'iconfont iconmofangpc',
  //   enabled: true,
  //   id: 5
  // },
  {
    name: '轮播图',
    icon: 'iconfont icona-tupianzhanbopc302',
    enabled: true,
    id: 6,
    ...createComponentMap('carousel')
  },
  {
    name: '文章咨询',
    icon: 'iconfont icongonggaopc',
    enabled: true,
    id: 7,
    ...createComponentMap('article')
  },
  {
    name: '品牌组件',
    icon: 'iconfont iconmiaoshashangpin',
    enabled: true,
    id: 8,
    ...createComponentMap('brand')
  },
  {
    name: '图文广告',
    icon: 'iconfont icontupiandaohangpc',
    enabled: true,
    id: 9,
    ...createComponentMap('advert')
  },
  // {
  //   name: '楼层组件',
  //   icon: 'iconfont iconshangpinliebiaopc',
  //   enabled: true,
  //   id: 10,
  //   ...createComponentMap('floor')
  // },
  // {
  //   name: '商品组件',
  //   icon: 'iconfont icona-shangpintuijianpc30',
  //   enabled: true,
  //   id: 11,
  //   ...createComponentMap('goods')
  // },
  // {
  //   name: '多商品组',
  //   icon: 'iconfont iconduoshangpinzupc',
  //   enabled: true,
  //   id: 12,
  //   ...createComponentMap('goodsList')
  // },
  // {
  //   name: '发现组件',
  //   icon: 'iconfont iconjifenshangpinpc',
  //   enabled: true,
  //   id: 13,
  //   ...createComponentMap('discover')
  // },
  // {
  //   name: '热区',
  //   icon: 'iconfont iconrequpc',
  //   enabled: true,
  //   id: 14,
  //   ...createComponentMap('hot')
  // }
];

/**
 * 加载所有组件
 * @returns 组件配置列表
 */
export async function loadDiyComponents(): Promise<any[]> {
  const components: any[] = [];

  const loadPromises = componentImportConfigs
    .filter((config: any) => config.enabled !== false)
    .map(async (config: any) => {
      try {
        const [pageModule] = await Promise.all([import(/* @vite-ignore */ config.pagePath)]);
        return {
          name: config.name,
          icon: config.icon,
          fid: config.fid,
          id: config.id,
          components: markRaw(pageModule.default),
          enabled: true
        } as any;
      } catch (error) {
        console.warn(`加载组件失败：${config.name}`, error);
        return null;
      }
    });

  const results = await Promise.all(loadPromises);
  return results.filter((item): item is any => item !== null);
}

/**
 * 获取组件分组配置
 * @param components 组件列表
 * @returns 分组后的组件配置
 */
export function getComponentGroups(components: any[]): any[] {
  return [
    {
      name: '基础组件',
      list: components,
      id: 1
    }
    // 后续可扩展多个分组，如：营销组件、商品组件等
  ];
}
