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

<script setup>
import { computed } from "vue";
import { Primitive } from "reka-ui";
import { useAppConfig } from "#imports";
import { useComponentProps } from "../composables/useComponentProps";
import { useLocale } from "../composables/useLocale";
import { get } from "../utils";
import { tv } from "../utils/tv";
import { pickLinkProps } from "../utils/link";
import icons from "../dictionary/icons";
import B24Avatar from "./Avatar.vue";
import B24LinkBase from "./LinkBase.vue";
import B24Link from "./Link.vue";
const _props = defineProps({
  as: { type: null, required: false, default: "nav" },
  items: { type: Array, required: false },
  separatorIcon: { type: [Function, Object], required: false },
  color: { type: null, required: false },
  labelKey: { type: null, required: false, default: "label" },
  class: { type: null, required: false },
  b24ui: { type: Object, required: false }
});
const slots = defineSlots();
const props = useComponentProps("breadcrumb", _props);
const { dir } = useLocale();
const appConfig = useAppConfig();
const separatorIcon = computed(() => props.separatorIcon || (dir.value === "rtl" ? icons.chevronLeft : icons.chevronRight));
const b24ui = computed(() => tv({ extend: theme, ...appConfig.b24ui?.breadcrumb || {} })({
  color: props.color
}));
</script>

<template>
  <Primitive :as="props.as" aria-label="breadcrumb" data-slot="root" :class="b24ui.root({ class: [props.b24ui?.root, props.class] })">
    <ol data-slot="list" :class="b24ui.list({ class: props.b24ui?.list })">
      <template v-for="(item, index) in props.items" :key="index">
        <li data-slot="item" :class="b24ui.item({ class: [props.b24ui?.item, item.b24ui?.item] })">
          <B24Link v-slot="{ active, ...slotProps }" v-bind="pickLinkProps(item)" custom>
            <B24LinkBase
              v-bind="slotProps"
              as="span"
              :aria-current="(item.active ?? active) && index === props.items.length - 1 ? 'page' : void 0"
              data-slot="link"
              :class="b24ui.link({ class: [props.b24ui?.link, item.b24ui?.link, item.class], active: item.active ?? index === props.items.length - 1, disabled: !!item.disabled, to: !!item.to })"
            >
              <slot
                :name="item.slot || 'item'"
                :item="item"
                :active="item.active ?? index === props.items.length - 1"
                :index="index"
                :b24ui="b24ui"
              >
                <slot
                  :name="item.slot ? `${item.slot}-leading` : 'item-leading'"
                  :item="item"
                  :active="item.active ?? index === props.items.length - 1"
                  :index="index"
                  :b24ui="b24ui"
                >
                  <Component
                    :is="item.icon"
                    v-if="item.icon"
                    data-slot="linkLeadingIcon"
                    :class="b24ui.linkLeadingIcon({ class: [props.b24ui?.linkLeadingIcon, item.b24ui?.linkLeadingIcon], active: item.active ?? index === props.items.length - 1 })"
                  />
                  <B24Avatar
                    v-else-if="item.avatar"
                    :size="props.b24ui?.linkLeadingAvatarSize || b24ui.linkLeadingAvatarSize()"
                    v-bind="item.avatar"
                    data-slot="linkLeadingAvatar"
                    :class="b24ui.linkLeadingAvatar({ class: [props.b24ui?.linkLeadingAvatar, item.b24ui?.linkLeadingAvatar], active: item.active ?? index === props.items.length - 1 })"
                  />
                </slot>

                <span
                  v-if="get(item, props.labelKey) || !!slots[item.slot ? `${item.slot}-label` : 'item-label']"
                  data-slot="linkLabel"
                  :class="b24ui.linkLabel({ class: [props.b24ui?.linkLabel, item.b24ui?.linkLabel] })"
                >
                  <slot
                    :name="item.slot ? `${item.slot}-label` : 'item-label'"
                    :item="item"
                    :active="item.active ?? index === props.items.length - 1"
                    :index="index"
                  >
                    {{ get(item, props.labelKey) }}
                  </slot>
                </span>

                <slot
                  :name="item.slot ? `${item.slot}-trailing` : 'item-trailing'"
                  :item="item"
                  :active="item.active ?? index === props.items.length - 1"
                  :index="index"
                />
              </slot>
            </B24LinkBase>
          </B24Link>
        </li>

        <li v-if="index < props.items.length - 1" role="presentation" aria-hidden="true" data-slot="separator" :class="b24ui.separator({ class: [props.b24ui?.separator, item.b24ui?.separator] })">
          <slot name="separator" :b24ui="b24ui">
            <Component
              :is="separatorIcon"
              data-slot="separatorIcon"
              :class="b24ui.separatorIcon({ class: [props.b24ui?.separatorIcon, item.b24ui?.separatorIcon] })"
            />
          </slot>
        </li>
      </template>
    </ol>
  </Primitive>
</template>
