<script setup lang="ts">
import { computed } from 'vue'

import ExplorerItem from './ExplorerItem.vue'
import NodeHoverTooltipOverlay from '@/components/trace/NodeHoverTooltipOverlay.vue'
import { useNodeHoverTooltip } from '@/composables/useNodeHoverTooltip'
import { useUiStore } from '@/stores/uiStore'
import type { TraceNodeHoverPayload } from '@/types/traceTooltip'
import { toNodeTooltipData } from '@/utils/traceTooltip'

const uiStore = useUiStore()
const parentNode = computed(() => uiStore.filteredTree)
const { hoveredNodeInfo, setNodeHover, clearNodeHover } = useNodeHoverTooltip()

function handleNodeHover(payload: TraceNodeHoverPayload) {
  setNodeHover(toNodeTooltipData(payload.item), payload.clientX, payload.clientY)
}
</script>

<template>
  <div v-if="parentNode" class="relative w-full max-w-full py-2">
    <ExplorerItem
      :key="parentNode.id"
      :item="parentNode"
      :isLastChild="parentNode.children.length != 0"
      :hereditaryOffset="[]"
      @hover-node="handleNodeHover"
      @leave-node="clearNodeHover"
    />
    <NodeHoverTooltipOverlay :info="hoveredNodeInfo" />
  </div>
</template>
