<script setup lang="ts">
import TreeSelect from '~/components/pub/my-ui/select-tree/tree-select.vue'

definePageMeta({
  layout: 'blank',
})

// Tipe data untuk konsistensi
interface TreeItem {
  value: string
  label: string
  hasChildren: boolean
  children?: TreeItem[]
}

// State untuk data pohon. Awalnya hanya berisi data level atas.
const treeData = ref<TreeItem[]>([
  { value: 'frontend', label: 'Frontend', hasChildren: true },
  { value: 'backend', label: 'Backend', hasChildren: true },
  { value: 'devops', label: 'DevOps', hasChildren: false },
])

// State untuk menampung nilai yang dipilih
const selectedValue = ref<string>()

// --- INI BAGIAN PENTING: LOGIKA API DAN MANIPULASI DATA ---

// Helper: Fungsi rekursif untuk mencari dan menyisipkan data anak ke dalam state
function findAndInsertChildren(nodes: TreeItem[], parentId: string, newChildren: TreeItem[]) {
  for (const node of nodes) {
    if (node.value === parentId) {
      node.children = newChildren
      return true
    }
    if (node.children && findAndInsertChildren(node.children, parentId, newChildren)) {
      return true
    }
  }
  return false
}

// Fungsi yang akan dipanggil oleh komponen TreeSelectItem untuk mengambil data
async function handleFetchChildren(parentId: string) {
  console.log(`Mengambil data anak untuk parent: ${parentId}`)

  // Simulasi panggilan API ke backend Anda
  await new Promise(resolve => setTimeout(resolve, 500)) // Delay 0.5 detik

  let childrenData: TreeItem[] = []
  if (parentId === 'frontend') {
    childrenData = [
      { value: 'vue', label: 'Vue.js', hasChildren: true },
      { value: 'react', label: 'React.js', hasChildren: false },
    ]
  } else if (parentId === 'backend') {
    childrenData = [
      { value: 'nodejs', label: 'Node.js', hasChildren: false },
      { value: 'golang', label: 'Go', hasChildren: false },
    ]
  } else if (parentId === 'vue') { // Contoh untuk level yang lebih dalam
    childrenData = [
      { value: 'nuxt', label: 'Nuxt.js', hasChildren: false },
    ]
  }
  // Akhir simulasi

  // Masukkan data anak yang baru didapat ke dalam state treeData
  findAndInsertChildren(treeData.value, parentId, childrenData)
}
</script>

<template>
  <div class="p-10">
    <h1 class="mb-4 text-2xl font-bold">Tree Select (Lazy Loading)</h1>
    <TreeSelect v-model="selectedValue" :data="treeData" :on-fetch-children="handleFetchChildren" />
    <p class="mt-4">
      Value yang terpilih:
      <span class="p-1 font-mono text-sm rounded-md bg-slate-100">{{ selectedValue || 'Belum ada' }}</span>
    </p>
  </div>
</template>
