<script setup>
import { ref, watch } from 'vue';

import { UserPrefStore } from '../stores/UserPrefStore.js';
import AppMenuItem from './AppMenuItem.vue';

const userPrefStore = UserPrefStore();


const model = ref([
   
    {
        label: 'Scenarios',
        items: [
        { label: 'Available Scenarios', icon: 'pi pi-fw pi-id-card', to: '/' },
        { label: 'Executions List', icon: 'pi pi-fw pi-id-card', to: '/executions' },
    ]    }, 
    {
        label: '',
        items: []    } ,
    {
        label: 'Canvas',
        items: [{ label: 'New Canvas', icon: 'pi pi-fw pi-id-card', to: '/mdcanvas' }]
    }

]);

// Funzione per aggiornare la sezione "Your Applications" in base a selectedApp
function updateApplicationsMenu() {
    const selectedApp = userPrefStore.getSelApp;
    console.log("selectedApp", selectedApp);

    if (selectedApp!=null) {
        // Se selectedApp non è nullo, aggiorna gli item
        model.value[1].label = selectedApp.fe_name;

// Aggiorna gli item dell'app selezionata
        model.value[1].items = [
            { label: 'Rev Eng Code', icon: 'pi pi-fw pi-id-card', to: '/app-browser' }
        ];

        if( selectedApp.available_scenarios.length > 0) {
            selectedApp.available_scenarios.forEach(app => {
                model.value[1].items.push({ label: app.label, icon: 'pi pi-fw pi-id-card', to: `/scenario/exec/${app.scenario_id}`  });
            });
        }
      
    
    } else {
        // Se selectedApp è nullo, svuota gli item
        model.value[1].label = '';
        model.value[1].items = [];
    }
}

// Monitora i cambiamenti in selectedApp dallo store
watch(() => userPrefStore.getSelApp, updateApplicationsMenu, { immediate: true });

</script>

<template>
    <ul class="layout-menu">
        <template v-for="(item, i) in model" :key="item">
            <app-menu-item v-if="!item.separator" :item="item" :index="i"></app-menu-item>
            <!--<li v-if="item.separator" class="menu-separator"></li>
            <hr v-if="i === 0" class="menu-separator"/>-->
        </template>
    </ul>
</template>

<style lang="scss" scoped></style>
