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

<script setup>
import { computed } from "vue";
import { StepperRoot, StepperItem, StepperTrigger, StepperIndicator, StepperSeparator, StepperTitle, StepperDescription } from "reka-ui";
import { reactivePick } from "@vueuse/core";
import { useAppConfig } from "#imports";
import { useComponentProps } from "../composables/useComponentProps";
import { useForwardProps } from "../composables/useForwardProps";
import { tv } from "../utils/tv";
import { get, itemValueIndex } from "../utils";
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" },
  valueKey: { type: null, required: false, default: "value" },
  defaultValue: { type: [String, Number], required: false },
  disabled: { type: Boolean, required: false },
  class: { type: null, required: false },
  b24ui: { type: Object, required: false },
  linear: { type: Boolean, required: false, default: true }
});
const emits = defineEmits(["next", "prev"]);
const slots = defineSlots();
const props = useComponentProps("stepper", _props);
const modelValue = defineModel({ type: [String, Number] });
const appConfig = useAppConfig();
const rootProps = useForwardProps(reactivePick(props, "as", "linear"));
const b24ui = computed(() => tv({ extend: theme, ...appConfig.b24ui?.stepper || {} })({
  orientation: props.orientation,
  size: props.size,
  color: props.color
}));
const currentStepIndex = computed({
  get() {
    const value = modelValue.value ?? props.defaultValue;
    if (value == null) return 0;
    const count = props.items.length;
    const position = typeof value === "number" ? value : -1;
    const inRange = position >= 0 && position < count;
    if (inRange && get(props.items[position], props.valueKey) === void 0) {
      return position;
    }
    const matched = itemValueIndex(props.items, value, props.valueKey);
    if (matched !== -1) return matched;
    return inRange ? position : -1;
  },
  set(value) {
    modelValue.value = get(props.items?.[value], props.valueKey) ?? 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" :orientation="props.orientation" 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 props.items"
        :key="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 < props.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] })">
          <slot :name="item.slot ? `${item.slot}-wrapper` : 'wrapper'" :item="item">
            <StepperTitle v-if="item.title || !!slots[item.slot ? `${item.slot}-title` : 'title']" as="div" 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>
            </StepperTitle>
            <StepperDescription v-if="item.description || !!slots[item.slot ? `${item.slot}-description` : 'description']" as="div" 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>
            </StepperDescription>
          </slot>
        </div>
      </StepperItem>
    </div>

    <div v-if="currentStep?.content || !!slots.content || currentStep?.slot && !!slots[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>
