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

<script setup>
import { computed } from "vue";
import { Primitive, Separator } from "reka-ui";
import { useAppConfig } from "#imports";
import { tv } from "../utils/tv";
import B24Avatar from "./Avatar.vue";
const props = defineProps({
  as: { type: null, required: false },
  items: { type: Array, required: true },
  size: { type: null, required: false },
  color: { type: null, required: false },
  orientation: { type: null, required: false, default: "vertical" },
  defaultValue: { type: [String, Number], required: false },
  reverse: { type: Boolean, required: false },
  class: { type: null, required: false },
  b24ui: { type: null, required: false }
});
const slots = defineSlots();
const modelValue = defineModel({ type: [String, Number] });
const appConfig = useAppConfig();
const b24ui = computed(() => tv({ extend: tv(theme), ...appConfig.b24ui?.timeline || {} })({
  orientation: props.orientation,
  size: props.size,
  color: props.color,
  reverse: props.reverse
}));
const currentStepIndex = computed(() => {
  const value = modelValue.value ?? props.defaultValue;
  if (typeof value === "string") {
    return props.items.findIndex((item) => item.value === value) ?? -1;
  }
  if (props.reverse) {
    return value != null ? props.items.length - 1 - value : -1;
  } else {
    return value ?? -1;
  }
});
function getItemState(index) {
  if (currentStepIndex.value === -1) return void 0;
  if (index === currentStepIndex.value) return "active";
  if (props.reverse) {
    return index > currentStepIndex.value ? "completed" : void 0;
  } else {
    return index < currentStepIndex.value ? "completed" : void 0;
  }
}
</script>

<template>
  <Primitive :as="as" :data-orientation="orientation" data-slot="root" :class="b24ui.root({ class: [props.b24ui?.root, props.class] })">
    <div
      v-for="(item, index) in items"
      :key="item.value ?? index"
      data-slot="item"
      :class="b24ui.item({ class: [props.b24ui?.item, item.b24ui?.item, item.class] })"
      :data-state="getItemState(index)"
    >
      <div data-slot="container" :class="b24ui.container({ class: [props.b24ui?.container, item.b24ui?.container] })">
        <B24Avatar
          :size="size"
          :icon="item.icon"
          v-bind="typeof item.avatar === 'object' ? item.avatar : {}"
          data-slot="indicator"
          :class="b24ui.indicator({ class: [props.b24ui?.indicator, item.b24ui?.indicator] })"
          :b24ui="{ icon: 'text-inherit', fallback: 'text-inherit' }"
        >
          <slot :name="item.slot ? `${item.slot}-indicator` : 'indicator'" :item="item" />
        </B24Avatar>

        <Separator
          v-if="index < items.length - 1"
          data-slot="separator"
          :class="b24ui.separator({ class: [props.b24ui?.separator, item.b24ui?.separator] })"
          :orientation="props.orientation"
        />
      </div>

      <div data-slot="wrapper" :class="b24ui.wrapper({ class: [props.b24ui?.wrapper, item.b24ui?.wrapper] })">
        <div v-if="item.date" data-slot="date" :class="b24ui.date({ class: [props.b24ui?.date, item.b24ui?.date] })">
          <slot :name="item.slot ? `${item.slot}-date` : 'date'" :item="item">
            {{ item.date }}
          </slot>
        </div>
        <div v-if="item.title || !!slots.title" data-slot="title" :class="b24ui.title({ class: [props.b24ui?.title, item.b24ui?.title] })">
          <slot :name="item.slot ? `${item.slot}-title` : 'title'" :item="item">
            {{ item.title }}
          </slot>
        </div>
        <div v-if="item.description || !!slots.description" data-slot="description" :class="b24ui.description({ class: [props.b24ui?.description, item.b24ui?.description] })">
          <slot :name="item.slot ? `${item.slot}-description` : 'description'" :item="item">
            {{ item.description }}
          </slot>
        </div>
      </div>
    </div>
  </Primitive>
</template>
