<template>
  <div class="menu-tree">
    <MenuTreeItem
      v-for="node in nodes"
      :key="node.id"
      :node="node"
      :level="1"
      :expanded-keys="expandedKeys"
      :selected-key="selectedKey"
      :dragging-node="draggingNode"
      @toggle="$emit('toggle', $event)"
      @select="$emit('select', $event)"
      @add-child="$emit('add-child', $event)"
      @delete="$emit('delete', $event)"
      @drag-start="$emit('drag-start', $event)"
      @drag-end="$emit('drag-end')"
      @drop="$emit('drop', $event)"
    />
  </div>
</template>

<script lang="ts" setup>
import MenuTreeItem from './MenuTreeItem.vue'
import type { MenuNode } from '../types'

defineProps<{
  nodes: MenuNode[]
  expandedKeys: Set<number>
  selectedKey: number | null
  draggingNode?: MenuNode | null
}>()

defineEmits<{
  (e: 'toggle', nodeId: number): void
  (e: 'select', node: MenuNode): void
  (e: 'add-child', parentId: number): void
  (e: 'delete', node: MenuNode): void
  (e: 'drag-start', node: MenuNode): void
  (e: 'drag-end'): void
  (e: 'drop', data: { dragNode: MenuNode; targetNode: MenuNode; position: 'before' | 'after' | 'inside' }): void
}>()
</script>

<script lang="ts">
export default {
  name: 'MenuTree',
}
</script>

<style scoped lang="less">
.menu-tree {
  user-select: none;
}
</style>
