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

<script setup>
import { ref, computed, watch } from "vue";
import { Primitive, Slot } from "reka-ui";
import { defu } from "defu";
import { useAppConfig } from "#imports";
import ImageComponent from "#build/b24ui-image-component";
import { useAvatarGroup } from "../composables/useAvatarGroup";
import { tv } from "../utils/tv";
import B24Chip from "./Chip.vue";
defineOptions({ inheritAttrs: false });
const props = defineProps({
  as: { type: null, required: false },
  src: { type: String, required: false },
  alt: { type: String, required: false },
  icon: { type: [Function, Object], required: false },
  text: { type: String, required: false },
  size: { type: null, required: false },
  chip: { type: [Boolean, Object], required: false },
  class: { type: null, required: false },
  style: { type: null, required: false },
  b24ui: { type: null, required: false }
});
const as = computed(() => {
  if (typeof props.as === "string" || typeof props.as?.render === "function") {
    return { root: props.as };
  }
  return defu(props.as, { root: "span" });
});
const fallback = computed(
  () => props.text || (props.alt || "").replace(/[+\-*)(}\][{]/g, "").split(" ").map((word) => word.charAt(0)).join("").substring(0, 2)
);
const appConfig = useAppConfig();
const { size } = useAvatarGroup(props);
const b24ui = computed(() => tv({ extend: tv(theme), ...appConfig.b24ui?.avatar || {} })({
  size: size.value
}));
const sizePx = computed(() => ({
  "3xs": 10,
  "2xs": 14,
  "xs": 18,
  "sm": 22,
  "md": 32,
  "lg": 42,
  "xl": 48,
  "2xl": 60,
  "3xl": 94
})[props.size || "md"]);
const error = ref(false);
watch(() => props.src, () => {
  if (error.value) {
    error.value = false;
  }
});
function onError() {
  error.value = true;
}
</script>

<template>
  <component
    :is="props.chip ? B24Chip : Primitive"
    :as="as.root"
    v-bind="props.chip ? typeof props.chip === 'object' ? { inset: true, ...props.chip } : { inset: true } : {}"
    data-slot="root"
    :class="b24ui.root({ class: [props.b24ui?.root, props.class] })"
    :style="props.style"
  >
    <component
      :is="as.img || ImageComponent"
      v-if="src && !error"
      :src="src"
      :alt="alt"
      :width="sizePx"
      :height="sizePx"
      v-bind="$attrs"
      data-slot="image"
      :class="b24ui.image({ class: props.b24ui?.image })"
      @error="onError"
    />

    <Slot v-else v-bind="$attrs">
      <slot>
        <Component :is="icon" v-if="icon" data-slot="icon" :class="b24ui.icon({ class: props.b24ui?.icon })" />
        <span v-else data-slot="fallback" :class="b24ui.fallback({ class: props.b24ui?.fallback })">{{ fallback || "\xA0" }}</span>
      </slot>
    </Slot>
  </component>
</template>
