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

<script setup>
import { computed } from "vue";
import { AccordionRoot, AccordionItem, AccordionHeader, AccordionTrigger, AccordionContent, useForwardPropsEmits } from "reka-ui";
import { reactivePick } from "@vueuse/core";
import { useAppConfig } from "#imports";
import { get } from "../utils";
import { tv } from "../utils/tv";
import icons from "../dictionary/icons";
const props = defineProps({
  as: { type: null, required: false },
  items: { type: Array, required: false },
  trailingIcon: { type: [Function, Object], required: false },
  labelKey: { type: String, required: false, default: "label" },
  class: { type: null, required: false },
  b24ui: { type: null, required: false },
  collapsible: { type: Boolean, required: false, default: true },
  defaultValue: { type: null, required: false },
  modelValue: { type: null, required: false },
  type: { type: String, required: false, default: "single" },
  disabled: { type: Boolean, required: false },
  unmountOnHide: { type: Boolean, required: false, default: true }
});
const emits = defineEmits(["update:modelValue"]);
const slots = defineSlots();
const appConfig = useAppConfig();
const rootProps = useForwardPropsEmits(reactivePick(props, "as", "collapsible", "defaultValue", "disabled", "modelValue", "type", "unmountOnHide"), emits);
const b24ui = computed(() => tv({ extend: tv(theme), ...appConfig.b24ui?.accordion || {} })({
  disabled: props.disabled
}));
</script>

<template>
  <AccordionRoot v-bind="rootProps" data-slot="root" :class="b24ui.root({ class: [props.b24ui?.root, props.class] })">
    <AccordionItem
      v-for="(item, index) in props.items"
      v-slot="{ open }"
      :key="index"
      :value="item.value || String(index)"
      :disabled="item.disabled"
      data-slot="item"
      :class="b24ui.item({ class: [props.b24ui?.item, item.b24ui?.item, item.class] })"
    >
      <AccordionHeader as="div" data-slot="header" :class="b24ui.header({ class: [props.b24ui?.header, item.b24ui?.header] })">
        <AccordionTrigger data-slot="trigger" :class="b24ui.trigger({ class: [props.b24ui?.trigger, item.b24ui?.trigger], disabled: item.disabled })">
          <slot name="leading" :item="item" :index="index" :open="open" :b24ui="b24ui">
            <Component
              :is="item.icon"
              v-if="item.icon"
              data-slot="leadingIcon"
              :class="b24ui.leadingIcon({ class: [props.b24ui?.leadingIcon, item?.b24ui?.leadingIcon] })"
            />
          </slot>

          <span
            v-if="get(item, props.labelKey) || !!slots.default"
            data-slot="label"
            :class="b24ui.label({ class: [props.b24ui?.label, item.b24ui?.label] })"
          >
            <slot :item="item" :index="index" :open="open">{{ get(item, props.labelKey) }}</slot>
          </span>

          <slot name="trailing" :item="item" :index="index" :open="open" :b24ui="b24ui">
            <Component
              :is="item.trailingIcon || trailingIcon || icons.chevronDown"
              data-slot="trailingIcon"
              :class="b24ui.trailingIcon({ class: [props.b24ui?.trailingIcon, item.b24ui?.trailingIcon] })"
            />
          </slot>
        </AccordionTrigger>
      </AccordionHeader>

      <AccordionContent
        v-if="item.content || !!slots.content || item.slot && !!slots[item.slot] || !!slots.body || item.slot && !!slots[`${item.slot}-body`]"
        data-slot="content"
        :class="b24ui.content({ class: [props.b24ui?.content, item.b24ui?.content] })"
      >
        <slot
          :name="item.slot || 'content'"
          :item="item"
          :index="index"
          :open="open"
          :b24ui="b24ui"
        >
          <div data-slot="body" :class="b24ui.body({ class: [props.b24ui?.body, item.b24ui?.body] })">
            <slot
              :name="item.slot ? `${item.slot}-body` : 'body'"
              :item="item"
              :index="index"
              :open="open"
              :b24ui="b24ui"
            >
              {{ item.content }}
            </slot>
          </div>
        </slot>
      </AccordionContent>
    </AccordionItem>
  </AccordionRoot>
</template>
