<script setup lang="ts">
import type { TreeItem } from './type'
import Leaf from './leaf.vue'
import TreeNode from './tree-node.vue'

const props = defineProps<{
  data: TreeItem[]
  selectedValue?: string
  onFetchChildren: (parentId: string) => Promise<void>
  level?: number
}>()

const emit = defineEmits(['select'])

function handleSelect(value: string) {
  emit('select', value)
}

// Computed untuk mendeteksi apakah ada node dengan children dalam level ini
const hasAnyChildrenInLevel = computed(() => {
  return props.data.some(item => item.hasChildren)
})

// Computed untuk menentukan apakah perlu alignment berdasarkan level
const shouldAlignLeaves = computed(() => {
  // Di root level (level 0), selalu align leaf dengan tree nodes jika ada mixed content
  // Di level lain, hanya align jika ada mixed content
  const isRootLevel = (props.level || 0) === 0
  const hasMixedContent = hasAnyChildrenInLevel.value && props.data.some(item => !item.hasChildren)

  return isRootLevel ? hasAnyChildrenInLevel.value : hasMixedContent
})
</script>

<template>
  <div class="tree-view min-w-max">
    <template v-for="item in data" :key="item.value">
      <TreeNode
        v-if="item.hasChildren"
        :item="item"
        :selected-value="selectedValue"
        :on-fetch-children="onFetchChildren"
        :level="level || 0"
        @select="handleSelect"
      />
      <Leaf
        v-else
        :item="item"
        :selected-value="selectedValue"
        :should-align="shouldAlignLeaves"
        @select="handleSelect"
      />
    </template>
  </div>
</template>
