<template> 
    <div class="flex items-center justify-between p-2">
            <h1>
                Source Code Explorer  : {{userPrefStore.getSelApp.fe_name}}
            </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" @nodeExpand="expandNode" @nodeCollapse="collapseNode" :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="userPrefStore.getSelApp.fe_name"/>
            </div>
        </div>
    </div>
</template>

<script setup>  

import FileFlowViewer from '@/components/FileFlowViewer.vue';
import { ApplicationCodeService } from '@/service/ApplicationCodeService';
import { LoadingStore } from '@/stores/LoadingStore.js';
import Tree from 'primevue/tree';
import { onMounted, ref, watch } from 'vue';
import { useRouter } from 'vue-router';
import { UserPrefStore } from '../../stores/UserPrefStore.js';

const nodes = ref(null)
const expandedKeys = ref({});
const selectedFile = ref({})
const router = useRouter();
const userPrefStore = UserPrefStore();
//const selectedApp = userPrefStore.getSelApp;
//const application=ref(selectedApp.fe_name)
const loadingStore = LoadingStore()

onMounted(() => {
    console.log("Mounted")
    fetchApplicationData();
})

function fetchApplicationData() {
    LoadingStore.another_loading = true;
    ApplicationCodeService.getApplication(userPrefStore.getSelApp.internal_name)
        .then(response => {
            const tmp = []
            tmp.push(response.data)
            nodes.value = tmp
            expandAll()   
            LoadingStore.another_loading = false;

        })
        .catch(error => {
            console.error("Error fetching application data:", error)
            LoadingStore.another_loading = false;

        })
}

function reloadPage() {
        console.log("collapse all");
        collapseAll();
        console.log("reloadPage");
        fetchApplicationData();
}

watch(() => userPrefStore.getSelApp, reloadPage);

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);
        }
    }
};*/

const expandNode = (node) => {
    if (node.children && node.children.length) {
        //node.children.forEach(child => {
            expandedKeys.value[node.children.key] = true;
       // });
    }
    expandedKeys.value = { ...expandedKeys.value };
};
 
const collapseNode = (node) => {
    if (node.children && node.children.length) {
       node.children.forEach(child => {
            delete expandedKeys.value[child.key];
        });
    }
    expandedKeys.value = { ...expandedKeys.value };
};

</script>


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

.p-inputtext {
    width: 100%;
}

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