<template>
  <span :class="badgeClass">
    <slot>{{ label }}</slot>
  </span>
</template>

<script>
import { computed, defineComponent } from "vue";
import { defu } from "defu";
import { classNames } from "../../utils";
import { useAppConfig } from "#imports";
import appConfig from "#build/app.config";
export default defineComponent({
  props: {
    size: {
      type: String,
      default: () => appConfig.ui.badge.default.size,
      validator(value) {
        return Object.keys(appConfig.ui.badge.size).includes(value);
      }
    },
    color: {
      type: String,
      default: () => appConfig.ui.badge.default.color,
      validator(value) {
        return [...appConfig.ui.colors, ...Object.keys(appConfig.ui.badge.color)].includes(value);
      }
    },
    variant: {
      type: String,
      default: () => appConfig.ui.badge.default.variant,
      validator(value) {
        return [
          ...Object.keys(appConfig.ui.badge.variant),
          ...Object.values(appConfig.ui.badge.color).flatMap((value2) => Object.keys(value2))
        ].includes(value);
      }
    },
    label: {
      type: String,
      default: null
    },
    ui: {
      type: Object,
      default: () => appConfig.ui.badge
    }
  },
  setup(props) {
    const appConfig2 = useAppConfig();
    const ui = computed(() => defu({}, props.ui, appConfig2.ui.badge));
    const badgeClass = computed(() => {
      const variant = ui.value.color?.[props.color]?.[props.variant] || ui.value.variant[props.variant];
      return classNames(
        ui.value.base,
        ui.value.font,
        ui.value.rounded,
        ui.value.size[props.size],
        variant?.replaceAll("{color}", props.color)
      );
    });
    return {
      badgeClass
    };
  }
});
</script>
