<template>
  <Dialog v-model:visible="dialogCodeVisible" modal :header="'Class detail: '+selectionNode.fullyQualifiedClassName" class="change-modal":style="{ width: '70vw', minHeight:'75vh'}">
      <SingleClassViewer v-if="dialogCodeVisible" :className="selectionNode.fullyQualifiedClassName" />
  </Dialog>

  <div>
          <VueFlow
              :nodes="nodes"
              :edges="edges"
              class=" basic-flow"
              :default-viewport="{ zoom: 1.5 }"
              :min-zoom="0.2"
              :max-zoom="4"
              @nodes-initialized="layoutGraph('LR')"
          >


            <template #node-class-node="props">
              <ClassNode v-bind="props" />
            </template>

      <Background pattern-color="#aaa" :gap="16" />

      <MiniMap />

      <Controls position="top-left">
      </Controls>
  </VueFlow>
  </div>

</template>


<script setup>


import { Background } from '@vue-flow/background'
import { Controls } from '@vue-flow/controls'
import { VueFlow, useVueFlow } from '@vue-flow/core'
import { MiniMap } from '@vue-flow/minimap'
import Dialog from 'primevue/dialog'
import { nextTick, onMounted, ref, toRefs, watch } from 'vue'
import ClassNode from './ClassNode.vue'
import { useLayout } from './useLayout'

import axios from 'axios'
import { defineProps } from 'vue'
import 'vue3-markdown/dist/style.css'


const { onInit, onNodeDragStop, onConnect, addEdges, setViewport, toObject, onNodeClick,fitView } = useVueFlow()

const nodes = ref(null)
const edges = ref(null)
const dark = ref(false)
const selectionNode = ref({fullyQualifiedClassName: '', description: ''})
const { graph, layout, previousDirection } = useLayout()

const dialogCodeVisible = ref(false)
const props = defineProps({
    file: {
        type: String,
        required: true
    },
    application: {
        type: String,
        required: true
    }
});

const { file } = toRefs(props);
const  fileDetails = ref(null);

onMounted(() => {
  //defineNodes()
})

watch(() => props.file, (first, second) => {
        loadFileDetails(first)
    });

onInit((vueFlowInstance) => {
  vueFlowInstance.fitView()
})


function loadFileDetails(filename){

    let fileInfo={
      filename: filename,
      applicationName: props.application
    }

    axios.post("/source-module/getFileSimpleInfo",fileInfo).then(response => {
        fileDetails.value =response.data
        defineNodes()
    })
}

onNodeClick(({ event, nodes, node }) => {
  console.log(node)
  if(node.type == 'class-node') {
    selectionNode.value = node.data.data
    dialogCodeVisible.value = true
  }

})


function layoutGraph(direction) {
  nodes.value = layout(nodes.value, edges.value, direction)
  nextTick(() => {
    fitView()
  })
}

function defineNodes() {

  var tmpNode=[]
    var tmpEdges=[]
    var  filename = fileDetails.value.filename.split("\\").slice(-1)[0].split("/").slice(-1)[0]

    tmpNode.push({
        id: filename,
        data: { label: filename },
        position: { x: 250, y: 0 },
        class: 'light',
    },) 

    fileDetails.value.classes.forEach((c) => {
        tmpNode.push({
            id: c.name,
            data: { label:c.name.split(".").slice(-1)[0] , data:{ fullyQualifiedClassName:c.name} },
            position: { x: 250, y: 0 },
            class: 'light',
            type: 'class-node'
        })
        tmpEdges.push({
            id: filename + c.name,
            source:  filename,
            target: c.name,
        })    
    })
   

    nodes.value = tmpNode
    edges.value = tmpEdges
    layoutGraph('LR')
}

</script>

<style>

@import '@vue-flow/core/dist/style.css';
@import '@vue-flow/core/dist/theme-default.css';
@import '@vue-flow/controls/dist/style.css';
@import '@vue-flow/minimap/dist/style.css';



.basic-flow{
    height: 90vh;
    width: 100%;
  
}

.vue-flow__minimap {
  transform: scale(75%);
  transform-origin: bottom right;
}

.basic-flow.dark {
    background:#2d3748;
    color:#fffffb
}

.basic-flow.dark .vue-flow__node {
    background:#4a5568;
    color:#fffffb
}

.basic-flow.dark .vue-flow__node.selected {
    background:#333;
    box-shadow:0 0 0 2px #2563eb
}

.basic-flow .vue-flow__controls {
    display:flex;
    flex-wrap:wrap;
    justify-content:center
}

.basic-flow.dark .vue-flow__controls {
    border:1px solid #FFFFFB
}

.basic-flow .vue-flow__controls .vue-flow__controls-button {
    border:none;
    border-right:1px solid #eee
}

.basic-flow.dark .vue-flow__controls .vue-flow__controls-button:hover {
    background:#4d4d4d
}

.basic-flow.dark .vue-flow__edge-textbg {
    fill:#292524
}

.basic-flow.dark .vue-flow__edge-text {
    fill:#fffffb
}


.vue-flow__node-class-node {
    border:1px solid #dc07bc;
    padding:10px;
    border-radius: 5px;
    background:#f5f5f5;
    display:flex;
    flex-direction:column;
    justify-content:space-between;
    align-items:center;
    gap:10px;
    max-width:250px;
    min-width: 200px;
}
</style>
