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

<script setup>
import { computed } from "vue";
import { Primitive } from "reka-ui";
import { useAppConfig } from "#imports";
import { useFieldGroup } from "../composables/useFieldGroup";
import { useComponentIcons } from "../composables/useComponentIcons";
import { tv } from "../utils/tv";
import Cross20Icon from "@bitrix24/b24icons-vue/actions/Cross20Icon";
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: null, 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 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: tv(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="as"
    data-slot="base"
    :class="b24ui.base({ class: [props.b24ui?.base, props.class] })"
  >
    <Primitive
      :as="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="!!avatar"
          :size="props.b24ui?.leadingAvatarSize || b24ui.leadingAvatarSize()"
          v-bind="avatar"
          data-slot="leadingAvatar"
          :class="b24ui.leadingAvatar({ class: props.b24ui?.leadingAvatar })"
        />
      </slot>

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