<script>
import theme from "#build/b24ui/progress-group";
</script>

<script setup>
import { computed } from "vue";
import { Primitive, ProgressRoot, ProgressIndicator } from "reka-ui";
import { useAppConfig } from "#imports";
import { useComponentProps } from "../composables/useComponentProps";
import { tv } from "../utils/tv";
const _props = defineProps({
  as: { type: null, required: false },
  items: { type: Array, required: false },
  max: { type: Number, required: false, default: 100 },
  status: { type: Boolean, required: false },
  size: { type: null, required: false },
  color: { type: null, required: false },
  orientation: { type: null, required: false, default: "horizontal" },
  class: { type: null, required: false },
  b24ui: { type: Object, required: false }
});
const slots = defineSlots();
const props = useComponentProps("progressGroup", _props);
const appConfig = useAppConfig();
const b24ui = computed(() => tv({ extend: theme, ...appConfig.b24ui?.progressGroup || {} })({
  size: props.size,
  color: props.color,
  orientation: props.orientation
}));
const max = computed(() => {
  const value = Number(props.max);
  return Number.isFinite(value) && value > 0 ? value : 100;
});
const values = computed(() => (props.items ?? []).map((item) => Math.min(Math.max(Number(item.value) || 0, 0), max.value)));
const percents = computed(() => values.value.map((value) => value / max.value * 100));
const percent = computed(() => Math.min(100, Math.round(percents.value.reduce((total, value) => total + value, 0))));
const statusStyle = computed(() => ({ "--percent": `${percent.value}%` }));
const itemColors = computed(() => (props.items ?? []).map((item) => item.color || props.color));
const hasList = computed(() => !!props.items?.length && (props.items.some((item) => item.label || item.icon || item.slot) || !!slots.item || !!slots["item-leading"] || !!slots["item-label"] || !!slots["item-trailing"]));
function segmentStyle(index) {
  const value = `${percents.value[index] ?? 0}%`;
  return props.orientation === "vertical" ? { height: value } : { width: value };
}
const valueLabels = computed(() => (props.items ?? []).map((item) => {
  const label = item.label;
  return label ? () => label : void 0;
}));
</script>

<template>
  <Primitive :as="props.as" :data-orientation="props.orientation" data-slot="root" :class="b24ui.root({ class: [props.b24ui?.root, props.class] })">
    <div v-if="props.status || !!slots.status" data-slot="status" :class="b24ui.status({ class: props.b24ui?.status })" :style="statusStyle">
      <slot name="status" :percent="percent">
        {{ percent }}%
      </slot>
    </div>

    <div data-slot="base" :class="b24ui.base({ class: props.b24ui?.base })">
      <ProgressRoot
        v-for="(item, index) in props.items"
        :key="index"
        :model-value="values[index]"
        :max="max"
        :get-value-label="valueLabels[index]"
        data-slot="segment"
        :class="b24ui.segment({ color: itemColors[index], class: [props.b24ui?.segment, item.b24ui?.segment] })"
        :style="segmentStyle(index)"
      >
        <ProgressIndicator data-slot="indicator" :class="b24ui.indicator({ class: [props.b24ui?.indicator, item.b24ui?.indicator] })" />
      </ProgressRoot>
    </div>

    <ul v-if="hasList" data-slot="list" :class="b24ui.list({ class: props.b24ui?.list })">
      <li v-for="(item, index) in props.items" :key="index" data-slot="item" :class="b24ui.item({ class: [props.b24ui?.item, item.b24ui?.item, item.class] })">
        <slot :name="item.slot || 'item'" :item="item" :index="index" :percent="percents[index] ?? 0">
          <slot :name="item.slot ? `${item.slot}-leading` : 'item-leading'" :item="item" :index="index" :percent="percents[index] ?? 0">
            <Component :is="item.icon" v-if="item.icon" data-slot="itemLeadingIcon" :class="b24ui.itemLeadingIcon({ color: itemColors[index], class: [props.b24ui?.itemLeadingIcon, item.b24ui?.itemLeadingIcon] })" />
            <span v-else data-slot="itemLeadingDot" :class="b24ui.itemLeadingDot({ color: itemColors[index], class: [props.b24ui?.itemLeadingDot, item.b24ui?.itemLeadingDot] })" />
          </slot>

          <span v-if="item.label || !!slots[item.slot ? `${item.slot}-label` : 'item-label']" data-slot="itemLabel" :class="b24ui.itemLabel({ class: [props.b24ui?.itemLabel, item.b24ui?.itemLabel] })">
            <slot :name="item.slot ? `${item.slot}-label` : 'item-label'" :item="item" :index="index" :percent="percents[index] ?? 0">
              {{ item.label }}
            </slot>
          </span>

          <span data-slot="itemTrailing" :class="b24ui.itemTrailing({ class: [props.b24ui?.itemTrailing, item.b24ui?.itemTrailing] })">
            <slot :name="item.slot ? `${item.slot}-trailing` : 'item-trailing'" :item="item" :index="index" :percent="percents[index] ?? 0">
              {{ Math.round(percents[index] ?? 0) }}%
            </slot>
          </span>
        </slot>
      </li>
    </ul>
  </Primitive>
</template>
