<script setup lang="ts">
import type { DevframeDockEntry } from '@devframes/hub'
import type { DocksContext } from '@devframes/hub/client'
import type { DevframeDockEntriesGrouped } from '../../state/dock-settings'
import DockEntries from './DockEntries.vue'

withDefaults(defineProps<{
  context: DocksContext
  groups: DevframeDockEntriesGrouped
  selected: DevframeDockEntry | null
  isVertical: boolean
  rotate?: boolean
  dimInactive?: boolean
}>(), {
  rotate: true,
  dimInactive: true,
})

const emit = defineEmits<{
  (e: 'select', entry: DevframeDockEntry): void
}>()
</script>

<template>
  <template v-for="[category, entries], idx of groups" :key="category">
    <slot v-if="idx > 0" name="separator" :category="category" :index="idx" :is-vertical="isVertical">
      <div class="border-base m1" :class="isVertical && !rotate ? 'w-20px h-px border-b-1.5' : 'h-20px w-px border-r-1.5'" />
    </slot>
    <DockEntries
      :context="context"
      :entries="entries"
      :is-vertical="isVertical && rotate"
      :selected="selected"
      :dim-inactive="dimInactive"
      @select="(e) => emit('select', e)"
    />
  </template>
</template>
