<template>
  <ProConfigProvider :theme="btnTheme">
    <component :is="h(Button, { ...$attrs, ...props, type: buttonType }, $slots)" />
  </ProConfigProvider>
</template>
<script lang="ts" setup>
  import { computed, h } from 'vue';

  import { useConfigContextInject } from 'ant-design-vue/es/config-provider/context';

  import { Button } from 'ant-design-vue';

  import { buttonProps, buttonColorPrimary, aButtonTypes } from './button';

  import type { ButtonType, AButtonType } from './button';

  const { theme: globalTheme } = useConfigContextInject();

  defineOptions({
    name: 'AButton',
  });

  const props = defineProps({
    ...buttonProps(),
    type: {
      type: String as PropType<ButtonType>,
    },
    // 自定义按钮颜色
    color: String,
  });

  const isCustomType = computed(() => Reflect.has(buttonColorPrimary, props.type!));

  const buttonType = computed<AButtonType>(() => {
    if (props.type && aButtonTypes.includes(props.type)) {
      return props.type as AButtonType;
    } else if (props.color || isCustomType.value) {
      return 'primary';
    }
    return 'default';
  });

  const btnTheme = computed(() => {
    const type = props.type!;
    if (props.color || isCustomType.value) {
      return {
        ...globalTheme.value,
        token: {
          colorPrimary: props.color || buttonColorPrimary[type],
        },
      };
    }
    return globalTheme.value;
  });
</script>
