<template> 
    <div class="flex items-center justify-between p-2">
            <h1>
                Source Code Explorer  : {{application}}
            </h1>
    </div>

    <div class="grid grid-cols-12 gap-2">
        <div class="col-span-4">
            <div class="card folder-tree ">
                <h5>File Browser</h5>

                <Tree :value="nodes" @nodeSelect="onNodeSelect"  selectionMode="single" :expandedKeys="expandedKeys" :filter="true" filterMode="lenient" class="w-full"></Tree>

            </div>
        </div>
        <div class="col-span-8">
            <div class="card flow-codeviewer">  
                <h5>File Explorer</h5>
                <FileFlowViewer :file="selectedFile" :application="application"/>
            </div>
        </div>
    </div>
</template>

<script setup>  

import FileFlowViewer from '@/components/FileFlowViewer.vue';
import { ApplicationCodeService } from '@/service/ApplicationCodeService';
import Tree from 'primevue/tree';
import { onMounted, ref } from 'vue';
const nodes = ref(null)
const expandedKeys = ref({});
const selectedFile = ref({})
const application=ref("ATF-Notifier")
onMounted(() => {
    console.log("Mounted")
    ApplicationCodeService.getApplication('ATF-Notifier').then(response => {
        var tmp = []
        tmp.push(response.data)
        nodes.value = tmp
        expandAll()   
    })
})

function onNodeSelect(e){
    if(e.icon == "pi pi-fw pi-file"){
        selectedFile.value = e.key
    }
    console.log(e)
}





const expandAll = () => {
    for (let node of nodes.value) {
        expandNode(node);
    }

    expandedKeys.value = { ...expandedKeys.value };
};

const collapseAll = () => {
    expandedKeys.value = {};
};

const expandNode = (node) => {
    expandedKeys.value[node.key] = true;

    if (node.children && node.children.length) {
        for (let child of node.children) {
            expandNode(child);
        }
    }
};

</script>


<style>
.folder-tree {
    min-height: 75vh;
    overflow: auto;
}

.p-inputtext {
    width: 100%;
}

.flow-codeviewer{
    height:75vh
}
</style>