<script>
import theme from "#build/b24ui/badge";
</script>

<script setup>
import { computed } from "vue";
import { Primitive } from "reka-ui";
import { useAppConfig } from "#imports";
import { useComponentProps } from "../composables/useComponentProps";
import { useFieldGroup } from "../composables/useFieldGroup";
import { useComponentIcons } from "../composables/useComponentIcons";
import { tv } from "../utils/tv";
import icons from "../dictionary/icons";
import B24Avatar from "./Avatar.vue";
const _props = defineProps({
  as: { type: null, required: false, default: "span" },
  label: { type: [String, Number], required: false },
  color: { type: null, required: false },
  inverted: { type: Boolean, required: false, default: false },
  size: { type: null, required: false },
  square: { type: Boolean, required: false },
  useLink: { type: Boolean, required: false },
  useClose: { type: Boolean, required: false },
  onCloseClick: { type: [Function, Array], required: false },
  class: { type: null, required: false },
  b24ui: { type: Object, required: false },
  icon: { type: [Function, Object], required: false },
  avatar: { type: Object, required: false },
  trailing: { type: Boolean, required: false },
  trailingIcon: { type: [Function, Object], required: false }
});
const slots = defineSlots();
const props = useComponentProps("badge", _props);
const appConfig = useAppConfig();
async function onCloseClickWrapper(event) {
  const callbacks = Array.isArray(props.onCloseClick) ? props.onCloseClick : [props.onCloseClick];
  try {
    await Promise.all(callbacks.map((fn) => fn?.(event)));
  } finally {
  }
}
const { orientation, size: fieldGroupSize } = useFieldGroup(_props);
const { isLeading, leadingIconName } = useComponentIcons(props);
const b24ui = computed(() => tv({ extend: theme, ...appConfig.b24ui?.badge || {} })({
  color: props.color,
  inverted: Boolean(props.inverted),
  size: fieldGroupSize.value ?? props.size,
  square: props.square || !slots.default && !props.label,
  fieldGroup: orientation.value,
  useLink: Boolean(props.useLink),
  useClose: Boolean(props.useClose),
  leading: Boolean(isLeading.value)
}));
</script>

<template>
  <Primitive
    :as="props.as"
    data-slot="base"
    :class="b24ui.base({ class: [props.b24ui?.base, props.class] })"
  >
    <Primitive
      :as="props.as"
      data-slot="wrapper"
      :class="b24ui.wrapper({ class: props.b24ui?.wrapper })"
    >
      <slot name="leading" :b24ui="b24ui">
        <Component
          :is="leadingIconName"
          v-if="isLeading && leadingIconName"
          data-slot="leadingIcon"
          :class="b24ui.leadingIcon({ class: props.b24ui?.leadingIcon })"
        />
        <B24Avatar
          v-else-if="!!props.avatar"
          :size="props.b24ui?.leadingAvatarSize || b24ui.leadingAvatarSize()"
          v-bind="props.avatar"
          data-slot="leadingAvatar"
          :class="b24ui.leadingAvatar({ class: props.b24ui?.leadingAvatar })"
        />
      </slot>

      <slot :b24ui="b24ui">
        <span v-if="props.label !== void 0 && props.label !== null" data-slot="label" :class="b24ui.label({ class: props.b24ui?.label })">
          {{ props.label }}
        </span>
      </slot>
    </Primitive>
    <slot name="trailing" :b24ui="b24ui">
      <Component
        :is="icons.close"
        v-if="props.useClose"
        data-slot="trailingIcon"
        :class="b24ui.trailingIcon({ class: props.b24ui?.trailingIcon })"
        aria-hidden="true"
        @click.stop.prevent="onCloseClickWrapper"
      />
    </slot>
  </Primitive>
</template>
