<template>
  <ClientOnly>
    <UModal @update:open="toggleModelState">
      <UTooltip text="Open Modal.">
        <UButton icon="i-tabler-route-square-2" color="neutral" variant="ghost" class="float-right" />
      </UTooltip>
      <template #body>
        <div class="relative w-full h-[75vh]">
          <VueFlow v-if="isModalOpen" :nodes="nodes" :edges="edges" :nodes-connectable="nodesConnectable" @nodes-initialized="layoutGraph" />
        </div>
      </template>
    </UModal>
  </ClientOnly>
</template>

<script setup lang="ts">
import { ref, } from 'vue';
import { useVueFlow, type Edge, type Node } from '@vue-flow/core'

const config = useRuntimeConfig();

// Define the props with TypeScript
const { treeData } = defineProps<{
  treeData: Array<Array<number>>;
  prefix: string;
}>();

const nodesConnectable = ref(false)
const isModalOpen = ref(false)
const hasParsedPaths = ref(false); // Flag to track if paths have been parsed

const nodes = ref<Node[]>([]);
const edges = ref<Edge[]>([]);
const { layout } = useLayout();
const { fitView, updateNodeInternals } = useVueFlow();

function toggleModelState(event: boolean) {
  if (event === true) {
    // Workaround to fix issue with connectors/edges after transition has finisehd
    //
    setTimeout(() => {
      updateNodeInternals(); // re-calculate node positions
    }, 250);
  }
  isModalOpen.value = event;
}

async function layoutGraph(): Promise<void> {
  nodes.value = layout(nodes.value, edges.value);
  await nextTick(() => {
    fitView();
  });
}
</script>