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

<script setup>
import { ref, computed } from "vue";
import { TabsRoot, TabsList, TabsIndicator, TabsTrigger, TabsContent, useForwardPropsEmits } from "reka-ui";
import { reactivePick } from "@vueuse/core";
import { useAppConfig } from "#imports";
import { get } from "../utils";
import { tv } from "../utils/tv";
import B24Avatar from "./Avatar.vue";
import B24Badge from "./Badge.vue";
const props = defineProps({
  as: { type: null, required: false },
  items: { type: Array, required: false },
  variant: { type: null, required: false },
  size: { type: null, required: false },
  orientation: { type: null, required: false, default: "horizontal" },
  content: { type: Boolean, required: false, default: true },
  labelKey: { type: null, required: false, default: "label" },
  class: { type: null, required: false },
  b24ui: { type: null, required: false },
  defaultValue: { type: null, required: false, default: "0" },
  modelValue: { type: null, required: false },
  activationMode: { type: String, required: false },
  unmountOnHide: { type: Boolean, required: false, default: true }
});
const emits = defineEmits(["update:modelValue"]);
const slots = defineSlots();
const appConfig = useAppConfig();
const rootProps = useForwardPropsEmits(reactivePick(props, "as", "unmountOnHide"), emits);
const b24ui = computed(() => tv({ extend: tv(theme), ...appConfig.b24ui?.tabs || {} })({
  variant: props.variant,
  size: props.size,
  orientation: props.orientation
}));
const triggersRef = ref([]);
defineExpose({
  triggersRef
});
</script>

<template>
  <TabsRoot
    v-bind="rootProps"
    :model-value="modelValue"
    :default-value="defaultValue"
    :orientation="orientation"
    :activation-mode="activationMode"
    data-slot="root"
    :class="b24ui.root({ class: [props.b24ui?.root, props.class] })"
  >
    <TabsList data-slot="list" :class="b24ui.list({ class: props.b24ui?.list })">
      <TabsIndicator data-slot="indicator" :class="b24ui.indicator({ class: props.b24ui?.indicator })" />

      <slot name="list-leading" />

      <TabsTrigger
        v-for="(item, index) of items"
        :key="index"
        :ref="(el) => triggersRef[index] = el"
        :value="item.value ?? String(index)"
        :disabled="item.disabled"
        data-slot="trigger"
        :class="b24ui.trigger({ class: [props.b24ui?.trigger, item.b24ui?.trigger] })"
      >
        <slot name="leading" :item="item" :index="index" :b24ui="b24ui">
          <Component
            :is="item.icon"
            v-if="item.icon"
            data-slot="leadingIcon"
            :class="b24ui.leadingIcon({ class: [props.b24ui?.leadingIcon, item.b24ui?.leadingIcon] })"
          />
          <B24Avatar
            v-else-if="item.avatar"
            :size="item.b24ui?.leadingAvatarSize || props.b24ui?.leadingAvatarSize || b24ui.leadingAvatarSize()"
            v-bind="item.avatar"
            data-slot="leadingAvatar"
            :class="b24ui.leadingAvatar({ class: [props.b24ui?.leadingAvatar, item.b24ui?.leadingAvatar] })"
          />
        </slot>

        <span v-if="get(item, props.labelKey) || !!slots.default" data-slot="label" :class="b24ui.label({ class: [props.b24ui?.label, item.b24ui?.label] })">
          <slot :item="item" :index="index">{{ get(item, props.labelKey) }}</slot>
        </span>

        <slot name="trailing" :item="item" :index="index" :b24ui="b24ui">
          <B24Badge
            v-if="item.badge || item.badge === 0"
            color="air-primary"
            :size="item.b24ui?.trailingBadgeSize || props.b24ui?.trailingBadgeSize || b24ui.trailingBadgeSize()"
            v-bind="typeof item.badge === 'string' || typeof item.badge === 'number' ? { label: item.badge } : item.badge"
            data-slot="trailingBadge"
            :class="b24ui.trailingBadge({ class: [props.b24ui?.trailingBadge, item.b24ui?.trailingBadge] })"
          />
        </slot>
      </TabsTrigger>

      <slot name="list-trailing" />
    </TabsList>

    <template v-if="!!content">
      <TabsContent
        v-for="(item, index) of items"
        :key="index"
        :value="item.value ?? String(index)"
        data-slot="content"
        :class="b24ui.content({ class: [props.b24ui?.content, item.b24ui?.content, item.class] })"
      >
        <slot
          :name="item.slot || 'content'"
          :item="item"
          :index="index"
          :b24ui="b24ui"
        >
          {{ item.content }}
        </slot>
      </TabsContent>
    </template>
  </TabsRoot>
</template>
