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

<script setup>
import { computed } from "vue";
import { Primitive } from "reka-ui";
import { useAppConfig } from "#imports";
import { useComponentProps } from "../composables/useComponentProps";
import { usePrefix } from "../composables/usePrefix";
import { tv } from "../utils/tv";
import B24Chip from "./Chip.vue";
import B24Avatar from "./Avatar.vue";
import B24Link from "./Link.vue";
defineOptions({ inheritAttrs: false });
const _props = defineProps({
  as: { type: null, required: false },
  name: { type: String, required: false },
  description: { type: String, required: false },
  avatar: { type: Object, required: false },
  chip: { type: [Boolean, Object], required: false },
  size: { type: null, required: false },
  orientation: { type: null, required: false, default: "horizontal" },
  to: { type: null, required: false },
  target: { type: [String, Object, null], required: false },
  onClick: { type: Function, required: false },
  class: { type: null, required: false },
  b24ui: { type: Object, required: false }
});
const slots = defineSlots();
const props = useComponentProps("user", _props);
const appConfig = useAppConfig();
const prefix = usePrefix();
const b24ui = computed(() => tv({ extend: theme, ...appConfig.b24ui?.user || {} })({
  size: props.size,
  orientation: props.orientation,
  to: !!props.to || !!props.onClick
}));
const chipSize = computed(() => {
  switch (props.size) {
    case "3xs":
      return "sm";
    case "2xs":
      return "sm";
    case "xs":
      return "sm";
    case "md":
      return "sm";
    case "lg":
      return "md";
    case "xl":
      return "md";
    case "2xl":
      return "lg";
    case "3xl":
      return "lg";
  }
  return "sm";
});
</script>

<template>
  <Primitive
    :as="props.as"
    v-bind="!props.to ? $attrs : {}"
    :data-orientation="props.orientation"
    data-slot="root"
    :class="b24ui.root({ class: [props.b24ui?.root, props.class] })"
    @click="props.onClick"
  >
    <slot name="avatar" :b24ui="b24ui">
      <B24Chip v-if="props.chip && props.avatar && !['3xs'].includes(props.size || '')" inset v-bind="typeof props.chip === 'object' ? props.chip : {}" :size="chipSize">
        <B24Avatar :alt="props.name" v-bind="props.avatar" :size="props.size" data-slot="avatar" :class="b24ui.avatar({ class: props.b24ui?.avatar })" />
      </B24Chip>
      <B24Avatar
        v-else-if="props.avatar"
        :alt="props.name"
        v-bind="props.avatar"
        :size="props.size"
        data-slot="avatar"
        :class="b24ui.avatar({ class: props.b24ui?.avatar })"
      />
    </slot>

    <div data-slot="wrapper" :class="b24ui.wrapper({ class: props.b24ui?.wrapper })">
      <B24Link
        v-if="props.to"
        :aria-label="props.name"
        v-bind="{ to: props.to, target: props.target, ...$attrs }"
        :class="prefix('focus:outline-none peer')"
        raw
      >
        <span :class="prefix('absolute inset-0')" aria-hidden="true" />
      </B24Link>

      <slot>
        <p v-if="props.name || !!slots.name" data-slot="name" :class="b24ui.name({ class: props.b24ui?.name })">
          <slot name="name">
            {{ props.name }}
          </slot>
        </p>
        <p v-if="props.description || !!slots.description" data-slot="description" :class="b24ui.description({ class: props.b24ui?.description })">
          <slot name="description">
            {{ props.description }}
          </slot>
        </p>
      </slot>
    </div>
  </Primitive>
</template>
