<script>
import theme from "#build/b24ui/description-list";
</script>

<script setup>
import { computed } from "vue";
import { useAppConfig } from "#imports";
import { get } from "../utils";
import { tv } from "../utils/tv";
import B24Avatar from "./Avatar.vue";
import B24Button from "./Button.vue";
const props = defineProps({
  legend: { type: String, required: false },
  text: { type: String, required: false },
  labelKey: { type: String, required: false, default: "label" },
  descriptionKey: { type: String, required: false, default: "description" },
  items: { type: Array, required: false },
  size: { type: null, required: false },
  class: { type: null, required: false },
  b24ui: { type: null, required: false }
});
const slots = defineSlots();
const appConfig = useAppConfig();
const b24ui = computed(() => tv({ extend: tv(theme), ...appConfig.b24ui?.descriptionList || {} })({
  size: props.size
}));
function normalizeItem(item) {
  if (item === null) {
    return {
      label: void 0,
      description: void 0,
      orientation: void 0
    };
  }
  const label = get(item, props.labelKey);
  const description = get(item, props.descriptionKey);
  const orientation = item?.orientation || "vertical";
  return {
    ...item,
    label,
    description,
    orientation
  };
}
const normalizedItems = computed(() => {
  if (!props.items) {
    return [];
  }
  return props.items.map(normalizeItem);
});
</script>

<template>
  <div data-slot="root" :class="b24ui.root({ class: [props.b24ui?.root, props.class] })">
    <h2 v-if="legend || !!slots.legend" data-slot="legend" :class="b24ui.legend({ class: props.b24ui?.legend })">
      <slot name="legend">
        {{ legend }}
      </slot>
    </h2>
    <p v-if="text || !!slots.text" data-slot="text" :class="b24ui.text({ class: props.b24ui?.text })">
      <slot name="text">
        {{ text }}
      </slot>
    </p>

    <dl data-slot="container" :class="b24ui.container({ class: props.b24ui?.container })">
      <template
        v-for="(item, index) in normalizedItems"
        :key="index"
      >
        <slot
          name="content-top"
          :item="item"
          :index="index"
          :b24ui="b24ui"
        />

        <slot
          :name="item.slot || 'content'"
          :item="item"
          :index="index"
          :b24ui="b24ui"
        >
          <dt
            data-slot="labelWrapper"
            :class="b24ui.labelWrapper({
  class: [
    props.b24ui?.labelWrapper,
    item?.b24ui?.labelWrapper
  ]
})"
          >
            <slot name="leading" :item="item" :index="index" :b24ui="b24ui">
              <Component
                :is="item.icon"
                v-if="item.icon"
                data-slot="icon"
                :class="b24ui.icon({
  class: [
    props.b24ui?.icon,
    item?.b24ui?.icon
  ]
})"
              />
              <B24Avatar
                v-else-if="item.avatar"
                :size="props.b24ui?.avatarSize || b24ui.avatarSize()"
                v-bind="item.avatar"
                data-slot="avatar"
                :class="b24ui.avatar({
  class: [
    props.b24ui?.avatar,
    item?.b24ui?.avatar
  ]
})"
              />
            </slot>
            <span
              data-slot="label"
              :class="b24ui.label({
  class: [
    item?.class,
    props.b24ui?.label,
    item?.b24ui?.label
  ]
})"
            >
              <slot name="label" :item="item" :index="index">
                {{ item.label }}
              </slot>
            </span>
          </dt>
          <dd
            :data-orientation="item.orientation"
            data-slot="descriptionWrapper"
            :class="b24ui.descriptionWrapper({
  class: [
    props.b24ui?.descriptionWrapper,
    item?.b24ui?.descriptionWrapper,
    item?.b24ui?.class
  ],
  orientation: item.orientation
})"
          >
            <span
              data-slot="description"
              :class="b24ui.description({
  class: [
    item?.class,
    props.b24ui?.description,
    item?.b24ui?.description
  ],
  orientation: item.orientation
})"
            >
              <slot name="description" :item="item" :index="index">
                {{ item.description }}
              </slot>
            </span>
            <span
              v-if="item.actions?.length || !!slots.actions"
              data-slot="actions"
              :class="b24ui.actions({
  class: [
    props.b24ui?.actions,
    item?.b24ui?.actions
  ],
  orientation: item.orientation
})"
            >
              <slot name="actions" :item="item" :index="index" :b24ui="b24ui">
                <B24Button
                  v-for="(action, indexActions) in item.actions"
                  :key="indexActions"
                  size="xs"
                  v-bind="action"
                />
              </slot>
            </span>
          </dd>
        </slot>

        <slot
          name="content-bottom"
          :item="item"
          :index="index"
          :b24ui="b24ui"
        />
      </template>
    </dl>
    <div
      v-if="!!slots.footer"
      data-slot="footer"
      :class="b24ui.footer({ class: props.b24ui?.footer })"
    >
      <slot name="footer" :b24ui="b24ui" />
    </div>
  </div>
</template>
