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

<script setup>
import { computed, ref, onBeforeUpdate } from "vue";
import { useAppConfig } from "#imports";
import { useComponentProps } from "../../composables/useComponentProps";
import { transformUI } from "../../utils";
import { tv } from "../../utils/tv";
import B24Accordion from "../Accordion.vue";
const _props = defineProps({
  type: { type: String, required: false, default: "multiple" },
  class: { type: null, required: false },
  b24ui: { type: Object, required: false }
});
const slots = defineSlots();
const props = useComponentProps("prose.accordion", _props);
const appConfig = useAppConfig();
const b24ui = computed(() => tv({ extend: tv(theme), ...appConfig.b24ui?.prose?.accordion || {} }));
const rerenderCount = ref(1);
const items = computed(() => {
  rerenderCount.value;
  return slots.default?.()?.flatMap(transformSlot).filter(Boolean) || [];
});
function transformSlot(slot, index) {
  if (typeof slot.type === "symbol") {
    return slot.children?.map(transformSlot);
  }
  return {
    index,
    label: slot.props?.label || `${index}`,
    description: slot.props?.description,
    icon: slot.props?.icon,
    component: slot
  };
}
onBeforeUpdate(() => rerenderCount.value++);
</script>

<template>
  <B24Accordion :type="props.type" :items="items" :unmount-on-hide="false" :class="props.class" :b24ui="transformUI(b24ui(), props.b24ui)">
    <template #content="{ item }">
      <component :is="item.component" />
    </template>
  </B24Accordion>
</template>
