<template>
  <div class="flex gap-2 p-1 justify-end">
    <div class="flex-col h-full w-15 text-left space-y-1 mt-1">
      <div>Parent</div>
      <div>Current</div>
      <div>Children</div>
    </div>
    <div class="mt-1 w-auto">
      <div class="flex mb-1">
        <NodeAvatar :node-grp="parentNode.nodeGrp" :empty-node="parentNode.emptyNode" />
        {{ parentNode.name }}
      </div>
      <div class="flex mb-1">
        <NodeAvatar :node-grp="currentNode.nodeGrp" :empty-node="currentNode.emptyNode" />
        {{ currentNode.name }}
      </div>
      <Select v-model="selectedChild" :modal="false">
        <SelectTrigger class="min-w-sm" :disabled="disableSelectTrigger">
          <SelectValue placeholder="Select a child node">
            {{ selectedChild?.name || '' }}</SelectValue
          >
        </SelectTrigger>
        <SelectContent position="popper">
          <SelectItem
            v-for="(child, cIdx) in completeChildren"
            :key="cIdx"
            :value="child"
            class="z-[2000] flex items-center gap-2"
            :disabled="child.emptyNode"
          >
            <NodeAvatar :node-grp="child.nodeGrp" :empty-node="child.emptyNode" />
            <span>{{ child.name }}</span>
          </SelectItem>
        </SelectContent>
      </Select>
    </div>
    <div class="flex flex-col h-full">
      <Tooltip :delay-duration="500">
        <TooltipTrigger as-child>
          <Button
            @click="updateSelectedNode(parentNode.id ? parentNode.id : '')"
            :disabled="!parentNode.name"
            variant="outline"
            >View Parent</Button
          >
        </TooltipTrigger>
        <TooltipContent side="bottom" class="z-[2000]">View parent node</TooltipContent>
      </Tooltip>
      <Tooltip :delay-duration="500">
        <TooltipTrigger as-child>
          <Button
            @click="updateSelectedNode(selectedChild && selectedChild.id ? selectedChild.id : '')"
            :disabled="(completeChildren ?? []).length < 1 || !selectedChild"
            class="mt-auto"
            variant="outline"
            >View Child</Button
          >
        </TooltipTrigger>
        <TooltipContent side="bottom" class="z-[2000]">View selected child node</TooltipContent>
      </Tooltip>
    </div>
  </div>
</template>
<script setup lang="ts">
import { computed, ref, type Ref } from 'vue'

import { Button } from '@/components/ui/button'
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue
} from '@/components/ui/select'
import { classifyNodeGroup } from '@/utils/nodeGroups'
import { useTracesStore } from '@/stores/traces'
import { Tooltip, TooltipContent, TooltipTrigger } from '@/components/ui/tooltip'
import { isEmptyNode } from '@/utils/emptyNode'
import NodeAvatar from '@/components/node-explorer/NodeAvatar.vue'
import type { ChildListItem } from '@/common/interface/trace'
import { findDirectParent } from '@/utils/nodeLineage'

const tracesStore = useTracesStore()

const selectedChild: Ref<ChildListItem | null> = ref(null)
const disableSelectTrigger: Ref<boolean> = ref(false)

const parentNode = computed(() => {
  const selectedNodeId = tracesStore.selectedNodeId
  const mainParentNode = tracesStore.selectedTrace?.parentNode
  if (!selectedNodeId || !mainParentNode || selectedNodeId === mainParentNode.id) {
    return {
      name: null,
      nodeGrp: null,
      id: selectedNodeId
    }
  }

  const directParent = findDirectParent(mainParentNode, selectedNodeId)
  if (!directParent) {
    return {
      name: null,
      nodeGrp: null,
      id: selectedNodeId
    }
  }

  return {
    name: directParent.name ? directParent.name : '',
    nodeGrp: classifyNodeGroup(directParent),
    id: directParent.id,
    emptyNode: isEmptyNode(directParent)
  }
})

const currentNode = computed(() => {
  const node = tracesStore.selectedNode!
  const nodeGrp = classifyNodeGroup(node)
  return {
    name: node.name ? node.name : '',
    nodeGrp: nodeGrp,
    emptyNode: isEmptyNode(node)
  }
})

const completeChildren = computed(() => {
  const children = tracesStore.selectedNode?.children.map((child) => ({
    name: child.name ? child.name : '',
    id: child?.id,
    nodeGrp: classifyNodeGroup(child),
    emptyNode: isEmptyNode(child)
  }))
  const noneEmptyChildren = (children ?? []).filter((child) => !child.emptyNode)
  disableSelectTrigger.value = true ? noneEmptyChildren.length === 0 : false
  if (noneEmptyChildren.length === 1) {
    selectedChild.value = noneEmptyChildren[0]
  }
  return children
})

function updateSelectedNode(nodeId: string) {
  if (nodeId !== '') {
    tracesStore.selectedNodeId = nodeId
    selectedChild.value = null
  }
}
</script>
