<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 } from 'vue'
import ClassNode from './ClassNode.vue'
import { useLayout } from './useLayout'
import { defineProps } from 'vue'
import 'vue3-markdown/dist/style.css'
import { UserPrefStore } from '@/stores/UserPrefStore.js';


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 userPrefStore = UserPrefStore();

//66f55e4b2894530b1c154f69
const props = defineProps({
    changes: {
        type: Object,
        required: true
    }
});
const { changes } = toRefs(props);

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

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


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 app = { name: userPrefStore.getSelApp.fe_name }
    tmpNode.push({
        id: app.name,
        data: { label: app.name },
        position: { x: 250, y: 0 },
        class: 'light',
    },) 

    changes.value.forEach((change) => {
        var label = change.filename.split("\\").slice(-1)[0].split("/").slice(-1)[0]
        tmpNode.push({
            id: change.filename,
            data: { label: label },
            position: { x: 250, y: 0 },
            class: 'light',
        })

        tmpEdges.push({
            id: app.name + change.filename,
            source: app.name,
            target: change.filename,
        })

      
        tmpNode.push({
            id: change.classname,
            data: { label: change.classname.split(".").slice(-1)[0] , data: change},
            type: 'class-node', 
            position: { x: 250, y: 0 },
            dimension: { width: 200, height: 100 },

          })
        tmpEdges.push({
            id: change.filename + change.classname,
            source:  change.filename,
            target: change.classname,
        })
  
            
    })

    nodes.value = tmpNode
    edges.value = tmpEdges
}

</script>

<template>
    <Dialog v-model:visible="dialogCodeVisible" modal :header="'Change on: '+selectionNode.classname" class="change-modal":style="{ width: '70vw', minHeight:'75vh'}">
      <CiaSingleImpactView :change="selectionNode"></CiaSingleImpactView>

    </Dialog>

    <div>
            <VueFlow
                :nodes="nodes"
                :edges="edges"
                :class="{ dark }"
                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>

<style scoped>
 
</style>