import { App, defineAsyncComponent } from 'vue'
import { FIRST_NAME } from '@/constants'
import upperFirst from 'lodash/upperFirst'
import camelCase from 'lodash/camelCase'

/* 注册全局组件 */
/* 使用 <def-chart></def-chart> */
export default {
  install(app: App) {
    // 导入符合规则的文件
    const requireComponent = import.meta.glob('../../base-ui/**/**.vue')
    for (const [fullPath, fn] of Object.entries(requireComponent)) {
      let componentName = fullPath.replace('../../base-ui/', '').replace('/index.vue', '')
      // 图标组件名称特殊处理
      if (componentName === 'icons') {
        componentName = 'icon'
      }
      // 获取组件的 PascalCase 名
      componentName = FIRST_NAME + upperFirst(camelCase(componentName))
      // 获取组件配置
      // @ts-ignore
      const componentConfig = defineAsyncComponent(fn)
      // 全局组件注册
      app.component(
        componentName,
        // 在 `.default` 上查找组件选项。
        // 如果组件导出了 `export default` 的话，该选项会存在。
        // 否则回退到模块的根。
        componentConfig
      )
    }
  }
}