import type { App, Component } from 'vue';

import { defineAsyncComponent } from 'vue';

import { ElLoading } from 'element-plus/es/components/loading/index';

type ElementComponentLoader = () => Promise<Component>;

const asyncComponents: Record<string, ElementComponentLoader> = {
  ElAlert: () =>
    import('element-plus/es/components/alert/index').then((m) => m.ElAlert),
  ElAvatar: () =>
    import('element-plus/es/components/avatar/index').then((m) => m.ElAvatar),
  ElBadge: () =>
    import('element-plus/es/components/badge/index').then((m) => m.ElBadge),
  ElBreadcrumb: () =>
    import('element-plus/es/components/breadcrumb/index').then(
      (m) => m.ElBreadcrumb,
    ),
  ElButton: () =>
    import('element-plus/es/components/button/index').then((m) => m.ElButton),
  ElCard: () =>
    import('element-plus/es/components/card/index').then((m) => m.ElCard),
  ElCascader: () =>
    import('element-plus/es/components/cascader/index').then(
      (m) => m.ElCascader,
    ),
  ElCheckbox: () =>
    import('element-plus/es/components/checkbox/index').then(
      (m) => m.ElCheckbox,
    ),
  ElDescriptions: () =>
    import('element-plus/es/components/descriptions/index').then(
      (m) => m.ElDescriptions,
    ),
  ElDropdown: () =>
    import('element-plus/es/components/dropdown/index').then(
      (m) => m.ElDropdown,
    ),
  ElEmpty: () =>
    import('element-plus/es/components/empty/index').then((m) => m.ElEmpty),
  ElForm: () =>
    import('element-plus/es/components/form/index').then((m) => m.ElForm),
  ElFormItem: () =>
    import('element-plus/es/components/form/index').then((m) => m.ElFormItem),
  ElInput: () =>
    import('element-plus/es/components/input/index').then((m) => m.ElInput),
  ElPopover: () =>
    import('element-plus/es/components/popover/index').then(
      (m) => m.ElPopover,
    ),
  ElRadioButton: () =>
    import('element-plus/es/components/radio/index').then(
      (m) => m.ElRadioButton,
    ),
  ElScrollbar: () =>
    import('element-plus/es/components/scrollbar/index').then(
      (m) => m.ElScrollbar,
    ),
  ElSkeleton: () =>
    import('element-plus/es/components/skeleton/index').then(
      (m) => m.ElSkeleton,
    ),
  ElTag: () =>
    import('element-plus/es/components/tag/index').then((m) => m.ElTag),
  ElTooltip: () =>
    import('element-plus/es/components/tooltip/index').then(
      (m) => m.ElTooltip,
    ),
  ElTree: () =>
    import('element-plus/es/components/tree/index').then((m) => m.ElTree),
  ElUpload: () =>
    import('element-plus/es/components/upload/index').then((m) => m.ElUpload),
};

function setupElementPlus(app: App) {
  for (const [name, loader] of Object.entries(asyncComponents)) {
    app.component(name, defineAsyncComponent(loader));
  }

  app.directive('loading', ElLoading.directive);
}

export { setupElementPlus };