<script setup lang="ts">
import { inject } from 'vue';
import { SidebarGroupContent } from '@/components/core/sidebar';
import {
  heightTransitionClass,
  onHeightTransitionAfterEnter,
  onHeightTransitionBeforeLeave,
  onHeightTransitionEnter,
  onHeightTransitionLeave,
} from '@/lib/heightTransition';
import { uiSidebarGroupContextKey } from './groupContext';

defineOptions({ name: 'UiSidebarGroupContent' });

const group = inject(uiSidebarGroupContextKey, null);
</script>

<template>
  <Transition
    :enter-active-class="heightTransitionClass"
    :leave-active-class="heightTransitionClass"
    @enter="onHeightTransitionEnter"
    @after-enter="onHeightTransitionAfterEnter"
    @before-leave="onHeightTransitionBeforeLeave"
    @leave="onHeightTransitionLeave"
  >
    <SidebarGroupContent v-if="!group || group.open.value" v-bind="$attrs">
      <slot />
    </SidebarGroupContent>
  </Transition>
</template>
