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

<script setup>
import { computed } from "vue";
import { StepperRoot, StepperItem, StepperTrigger, StepperIndicator, StepperSeparator, StepperTitle, StepperDescription, useForwardProps } from "reka-ui";
import { reactivePick } from "@vueuse/core";
import { useAppConfig } from "#imports";
import { tv } from "../utils/tv";
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: "horizontal" },
  defaultValue: { type: [String, Number], required: false },
  disabled: { type: Boolean, required: false },
  class: { type: null, required: false },
  b24ui: { type: null, required: false },
  linear: { type: Boolean, required: false, default: true }
});
const emits = defineEmits(["next", "prev"]);
const slots = defineSlots();
const modelValue = defineModel({ type: [String, Number] });
const appConfig = useAppConfig();
const rootProps = useForwardProps(reactivePick(props, "as", "orientation", "linear"));
const b24ui = computed(() => tv({ extend: tv(theme), ...appConfig.b24ui?.stepper || {} })({
  orientation: props.orientation,
  size: props.size,
  color: props.color
}));
const currentStepIndex = computed({
  get() {
    const value = modelValue.value ?? props.defaultValue;
    return (typeof value === "string" ? props.items.findIndex((item) => item.value === value) : value) ?? 0;
  },
  set(value) {
    modelValue.value = props.items?.[value]?.value ?? value;
  }
});
const currentStep = computed(() => props.items?.[currentStepIndex.value]);
const hasNext = computed(() => currentStepIndex.value < props.items?.length - 1);
const hasPrev = computed(() => currentStepIndex.value > 0);
defineExpose({
  next() {
    if (hasNext.value) {
      currentStepIndex.value += 1;
      emits("next", currentStep.value);
    }
  },
  prev() {
    if (hasPrev.value) {
      currentStepIndex.value -= 1;
      emits("prev", currentStep.value);
    }
  },
  hasNext,
  hasPrev
});
</script>

<template>
  <StepperRoot v-bind="rootProps" v-model="currentStepIndex" data-slot="root" :class="b24ui.root({ class: [props.b24ui?.root, props.class] })">
    <div data-slot="header" :class="b24ui.header({ class: props.b24ui?.header })">
      <StepperItem
        v-for="(item, count) in items"
        :key="item.value ?? count"
        :step="count"
        :disabled="item.disabled || props.disabled"
        data-slot="item"
        :class="b24ui.item({ class: [props.b24ui?.item, item.b24ui?.item, item.class] })"
      >
        <div data-slot="container" :class="b24ui.container({ class: [props.b24ui?.container, item.b24ui?.container] })">
          <StepperTrigger data-slot="trigger" :class="b24ui.trigger({ class: [props.b24ui?.trigger, item.b24ui?.trigger] })">
            <StepperIndicator data-slot="indicator" :class="b24ui.indicator({ class: [props.b24ui?.indicator, item.b24ui?.indicator] })">
              <slot name="indicator" :item="item" :b24ui="b24ui">
                <Component
                  :is="item.icon"
                  v-if="item.icon"
                  data-slot="icon"
                  :class="b24ui.icon({ class: [props.b24ui?.icon, item.b24ui?.icon] })"
                />
                <template v-else>
                  {{ count + 1 }}
                </template>
              </slot>
            </StepperIndicator>
          </StepperTrigger>

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

        <div data-slot="wrapper" :class="b24ui.wrapper({ class: [props.b24ui?.wrapper, item.b24ui?.wrapper] })">
          <StepperTitle as="div" data-slot="title" :class="b24ui.title({ class: [props.b24ui?.title, item.b24ui?.title] })">
            <slot name="title" :item="item">
              {{ item.title }}
            </slot>
          </StepperTitle>
          <StepperDescription as="div" data-slot="description" :class="b24ui.description({ class: [props.b24ui?.description, item.b24ui?.description] })">
            <slot name="description" :item="item">
              {{ item.description }}
            </slot>
          </StepperDescription>
        </div>
      </StepperItem>
    </div>

    <div v-if="currentStep?.content || !!slots.content || currentStep?.slot" data-slot="content" :class="b24ui.content({ class: props.b24ui?.content })">
      <slot
        :name="currentStep?.slot || 'content'"
        :item="currentStep"
      >
        {{ currentStep?.content }}
      </slot>
    </div>
  </StepperRoot>
</template>
