<script setup>
import { reactiveOmit } from "@vueuse/core";
import { ListboxGroup, ListboxGroupLabel, useId } from "reka-ui";
import { computed, onMounted, onUnmounted } from "vue";
import { cn } from "../../../utils/cn";
import { provideCommandGroupContext, useCommand } from ".";
const props = defineProps({
  asChild: { type: Boolean, required: false },
  as: { type: null, required: false },
  class: { type: [Boolean, null, String, Object, Array], required: false, skipCheck: true },
  heading: { type: String, required: false }
});
const delegatedProps = reactiveOmit(props, "class");
const { allGroups, filterState } = useCommand();
const id = useId();
const isRender = computed(() => !filterState.search ? true : filterState.filtered.groups.has(id));
provideCommandGroupContext({ id });
onMounted(() => {
  if (!allGroups.value.has(id))
    allGroups.value.set(id, /* @__PURE__ */ new Set());
});
onUnmounted(() => {
  allGroups.value.delete(id);
});
</script>

<template>
  <ListboxGroup
    v-bind="delegatedProps"
    :id="id"
    data-slot="command-group"
    :class="cn('text-zinc-700 p-1 pt-0 outline-none', props.class)"
    :hidden="isRender ? void 0 : true"
  >
    <ListboxGroupLabel
      v-if="heading"
      data-slot="command-group-heading"
      class="sticky top-0 z-10 bg-white px-2 py-2 text-xs font-medium text-zinc-700 select-none"
    >
      {{ heading }}
    </ListboxGroupLabel>
    <div
      v-else
      class="h-1"
    />
    <slot />
  </ListboxGroup>
</template>
