/**
 * 通用组件共同的使用的基础组件，原先放在 adapter/form 内部，限制了使用范围，这里提取出来，方便其他地方使用
 * 可用于 vben-form、vben-modal、vben-drawer 等组件使用,
 */

import type { Component } from 'vue';

import type { BaseFormComponentType } from '@vben-core/form-ui';
import type { Recordable } from '@vben/types';

import { defineAsyncComponent, defineComponent, h, ref } from 'vue';

import { globalShareState } from '@vben-core/shared/global-state';
import { $t } from '@vben/locales';

import { ApiComponent } from '@vben/common-ui/es/api-component';

const ElButton = defineAsyncComponent(() =>
  import('element-plus/es/components/button/index').then((res) => res.ElButton),
);
const ElCheckbox = defineAsyncComponent(() =>
  import('element-plus/es/components/checkbox/index').then(
    (res) => res.ElCheckbox,
  ),
);
const ElCheckboxButton = defineAsyncComponent(() =>
  import('element-plus/es/components/checkbox/index').then(
    (res) => res.ElCheckboxButton,
  ),
);
const ElCheckboxGroup = defineAsyncComponent(() =>
  import('element-plus/es/components/checkbox/index').then(
    (res) => res.ElCheckboxGroup,
  ),
);
const ElDivider = defineAsyncComponent(() =>
  import('element-plus/es/components/divider/index').then(
    (res) => res.ElDivider,
  ),
);
const ElInput = defineAsyncComponent(() =>
  import('element-plus/es/components/input/index').then((res) => res.ElInput),
);
const ElRadio = defineAsyncComponent(() =>
  import('element-plus/es/components/radio/index').then((res) => res.ElRadio),
);
const ElRadioButton = defineAsyncComponent(() =>
  import('element-plus/es/components/radio/index').then(
    (res) => res.ElRadioButton,
  ),
);
const ElRadioGroup = defineAsyncComponent(() =>
  import('element-plus/es/components/radio/index').then(
    (res) => res.ElRadioGroup,
  ),
);
const ElSpace = defineAsyncComponent(() =>
  import('element-plus/es/components/space/index').then((res) => res.ElSpace),
);
const ElSwitch = defineAsyncComponent(() =>
  import('element-plus/es/components/switch/index').then((res) => res.ElSwitch),
);

const ElCascader = defineAsyncComponent(() =>
  import('element-plus/es/components/cascader/index').then(
    (res) => res.ElCascader,
  ),
);
const ElDatePicker = defineAsyncComponent(() =>
  import('element-plus/es/components/date-picker/index').then(
    (res) => res.ElDatePicker,
  ),
);
const ElInputNumber = defineAsyncComponent(() =>
  import('element-plus/es/components/input-number/index').then(
    (res) => res.ElInputNumber,
  ),
);
const ElSelectV2 = defineAsyncComponent(() =>
  import('element-plus/es/components/select-v2/index').then(
    (res) => res.ElSelectV2,
  ),
);
const ElTimePicker = defineAsyncComponent(() =>
  import('element-plus/es/components/time-picker/index').then(
    (res) => res.ElTimePicker,
  ),
);
const ElTreeSelect = defineAsyncComponent(() =>
  import('element-plus/es/components/tree-select/index').then(
    (res) => res.ElTreeSelect,
  ),
);
const ElUpload = defineAsyncComponent(() =>
  import('element-plus/es/components/upload/index').then((res) => res.ElUpload),
);

const DeptSelector = defineAsyncComponent(() =>
  import('#/components/zq-form/dept-selector/dept-selector.vue').then(
    (res) => res.default,
  ),
);
const PostSelector = defineAsyncComponent(() =>
  import('#/components/zq-form/post-selector/post-selector.vue').then(
    (res) => res.default,
  ),
);
const RoleSelector = defineAsyncComponent(() =>
  import('#/components/zq-form/role-selector/role-selector.vue').then(
    (res) => res.default,
  ),
);
const FileSelector = defineAsyncComponent(() =>
  import('#/components/zq-form/file-selector/file-selector.vue').then(
    (res) => res.default,
  ),
);
const ImageSelector = defineAsyncComponent(() =>
  import('#/components/zq-form/image-selector/image-selector.vue').then(
    (res) => res.default,
  ),
);
const UserSelector = defineAsyncComponent(() =>
  import('#/components/zq-form/user-selector/user-selector.vue').then(
    (res) => res.default,
  ),
);
const ZqIconPicker = defineAsyncComponent(() =>
  import('#/components/zq-form/zq-icon-picker/zq-icon-picker.vue').then(
    (res) => res.default,
  ),
);

const withDefaultPlaceholder = <T extends Component>(
  component: T,
  type: 'input' | 'select',
  componentProps: Recordable<any> = {},
) => {
  return defineComponent({
    name: (component as any).name,
    inheritAttrs: false,
    setup: (props: any, { attrs, expose, slots }) => {
      const placeholder =
        props?.placeholder ||
        attrs?.placeholder ||
        $t(`ui.placeholder.${type}`);
      // 透传组件暴露的方法
      const innerRef = ref();
      expose(
        new Proxy(
          {},
          {
            get: (_target, key) => innerRef.value?.[key],
            has: (_target, key) => key in (innerRef.value || {}),
          },
        ),
      );
      return () =>
        h(
          component,
          { ...componentProps, placeholder, ...props, ...attrs, ref: innerRef },
          slots,
        );
    },
  });
};

// 这里需要自行根据业务组件库进行适配，需要用到的组件都需要在这里类型说明
let initialized = false;

export type ComponentType =
  | 'ApiSelect'
  | 'ApiTreeSelect'
  | 'Cascader'
  | 'Checkbox'
  | 'CheckboxGroup'
  | 'CodeEditor'
  | 'DatePicker'
  | 'DeptSelector'
  | 'Divider'
  | 'FileSelector'
  | 'IconPicker'
  | 'ImageSelector'
  | 'Input'
  | 'InputNumber'
  | 'PostSelector'
  | 'RadioGroup'
  | 'RoleSelector'
  | 'Select'
  | 'Space'
  | 'Switch'
  | 'Textarea'
  | 'TimePicker'
  | 'TreeSelect'
  | 'Upload'
  | 'UserSelector'
  | BaseFormComponentType;

function initComponentAdapter() {
  if (initialized) {
    return;
  }

  const components: Partial<Record<ComponentType, Component>> = {
    // 如果你的组件体积比较大，可以使用异步加载
    // Button: () =>
    // import('xxx').then((res) => res.Button),
    ApiSelect: withDefaultPlaceholder(
      {
        ...ApiComponent,
        name: 'ApiSelect',
      },
      'select',
      {
        component: ElSelectV2,
        loadingSlot: 'loading',
        visibleEvent: 'onVisibleChange',
      },
    ),
    ApiTreeSelect: withDefaultPlaceholder(
      {
        ...ApiComponent,
        name: 'ApiTreeSelect',
      },
      'select',
      {
        component: ElTreeSelect,
        props: { label: 'label', children: 'children' },
        nodeKey: 'value',
        loadingSlot: 'loading',
        optionsPropName: 'data',
        visibleEvent: 'onVisibleChange',
      },
    ),
    Cascader: withDefaultPlaceholder(ElCascader, 'select'),
    Checkbox: ElCheckbox,
    CheckboxGroup: (props, { attrs, slots }) => {
      let defaultSlot;
      if (Reflect.has(slots, 'default')) {
        defaultSlot = slots.default;
      } else {
        const { options, isButton } = attrs;
        if (Array.isArray(options)) {
          defaultSlot = () =>
            options.map((option) =>
              h(isButton ? ElCheckboxButton : ElCheckbox, option),
            );
        }
      }
      return h(
        ElCheckboxGroup,
        { ...props, ...attrs },
        { ...slots, default: defaultSlot },
      );
    },
    // 自定义默认按钮
    DefaultButton: (props, { attrs, slots }) => {
      return h(ElButton, { ...props, attrs }, slots);
    },
    // 自定义主要按钮
    PrimaryButton: (props, { attrs, slots }) => {
      return h(ElButton, { ...props, attrs, type: 'primary' }, slots);
    },
    DeptSelector: withDefaultPlaceholder(DeptSelector, 'select'),
    PostSelector: withDefaultPlaceholder(PostSelector, 'select'),
    RoleSelector: withDefaultPlaceholder(RoleSelector, 'select'),
    Divider: ElDivider,
    FileSelector: withDefaultPlaceholder(FileSelector, 'select'),
    IconPicker: withDefaultPlaceholder(ZqIconPicker, 'select'),
    ImageSelector: withDefaultPlaceholder(ImageSelector, 'select'),
    Input: withDefaultPlaceholder(ElInput, 'input'),
    Textarea: withDefaultPlaceholder(ElInput, 'input', { type: 'textarea' }),
    CodeEditor: withDefaultPlaceholder(ElInput, 'input', {
      autosize: { minRows: 8 },
      type: 'textarea',
    }),
    InputNumber: withDefaultPlaceholder(ElInputNumber, 'input'),
    RadioGroup: (props, { attrs, slots }) => {
      let defaultSlot;
      if (Reflect.has(slots, 'default')) {
        defaultSlot = slots.default;
      } else {
        const { options } = attrs;
        if (Array.isArray(options)) {
          defaultSlot = () =>
            options.map((option) =>
              h(attrs.isButton ? ElRadioButton : ElRadio, option),
            );
        }
      }
      return h(
        ElRadioGroup,
        { ...props, ...attrs },
        { ...slots, default: defaultSlot },
      );
    },
    Select: (props, { attrs, slots }) => {
      return h(ElSelectV2, { ...props, attrs }, slots);
    },
    Space: ElSpace,
    Switch: ElSwitch,
    TimePicker: (props, { attrs, slots }) => {
      const { name, id, isRange } = props;
      const extraProps: Recordable<any> = {};
      if (isRange) {
        if (name && !Array.isArray(name)) {
          extraProps.name = [name, `${name}_end`];
        }
        if (id && !Array.isArray(id)) {
          extraProps.id = [id, `${id}_end`];
        }
      }
      return h(
        ElTimePicker,
        {
          ...props,
          ...attrs,
          ...extraProps,
        },
        slots,
      );
    },
    DatePicker: (props, { attrs, slots }) => {
      const { name, id, type } = props;
      const extraProps: Recordable<any> = {};
      if (type && type.includes('range')) {
        if (name && !Array.isArray(name)) {
          extraProps.name = [name, `${name}_end`];
        }
        if (id && !Array.isArray(id)) {
          extraProps.id = [id, `${id}_end`];
        }
      }
      return h(
        ElDatePicker,
        {
          ...props,
          ...attrs,
          ...extraProps,
        },
        slots,
      );
    },
    TreeSelect: withDefaultPlaceholder(ElTreeSelect, 'select'),
    Upload: ElUpload,
    UserSelector: withDefaultPlaceholder(UserSelector, 'select'),
  };

  // 将组件注册到全局共享状态中
  globalShareState.setComponents(components);
  initialized = true;

  // 定义全局共享状态中的消息提示
  globalShareState.defineMessage({
    // 复制成功消息提示
    copyPreferencesSuccess: (title: string, content: string) => {
      void import('element-plus/es/components/notification/index').then(
        ({ ElNotification }) => {
          ElNotification({
            title,
            message: content,
            position: 'bottom-right',
            duration: 0,
            type: 'success',
          });
        },
      );
    },
  });
}

export { initComponentAdapter };
