<script setup lang="ts">
import { computed, provide, ref, useAttrs } from 'vue';
import { SidebarGroup } from '@/components/core/sidebar';
import { cn, omitClass } from '@/lib/utils';
import { uiSidebarGroupContextKey } from './groupContext';
import type { UiSidebarGroupProps } from './types';

defineOptions({
  name: 'UiSidebarGroup',
  inheritAttrs: false,
});

const props = withDefaults(defineProps<UiSidebarGroupProps>(), {
  defaultOpen: true,
});

const open = ref(props.defaultOpen);

function toggle() {
  open.value = !open.value;
}

const attrs = useAttrs();

const groupClass = computed(() =>
  cn('!p-2', attrs.class as string | undefined),
);

const passthroughAttrs = computed(() =>
  omitClass(attrs as Record<string, unknown>),
);

provide(uiSidebarGroupContextKey, {
  open,
  toggle,
});
</script>

<template>
  <SidebarGroup v-bind="passthroughAttrs" :class="groupClass">
    <slot />
  </SidebarGroup>
</template>
