<template>
    <div>
    <h1>Available Scenarios</h1>
    </div>
    <div v-if="loading" class="flex justify-center">
    <ProgressSpinner style="width: 50px; height: 50px; margin-top: 50px" strokeWidth="3" fill="transparent"/>
    </div>
    <div v-else>
        <DataView :value="filter" :layout="layout" paginator :rows="8">
        <template #header>
            <div class="header-container">
                <div class="search-bar">
                    <i class="pi pi-search search-icon"></i>           
                    <InputText
                        class="search-input"
                        type="search"
                        placeholder="Search"
                        v-model="data.search"
                        size="medium"
                        variant="filled"
                    />
                </div>
                 <!-- Aggiungi il Dropdown qui -->
                 <Dropdown 
                        v-model="selectedApp"
                        :options="dataApp.apps"
                        optionLabel="fe_name"
                        placeholder="Select an Option"
                        class="dropdown-list"
                        @change="reloadScenarios"
                    />
                <SelectButton v-model="layout" :options="options" :allowEmpty="false" class="layout-switch">
                    <template #option="{ option }">
                        <i :class="[option === 'list' ? 'pi pi-bars' : 'pi pi-table']" />
                    </template>
                </SelectButton>
            </div>
        </template>

        <template #list="slotProps">
            <div class="flex flex-col space-y-4 mt-2">
                
               
                <div v-for="(item, index) in slotProps.items" :key="index">
                    <div class="flex flex-col sm:flex-row sm:items-center p-6 gap-4 bg-white dark:bg-gray-800 rounded-lg shadow-md"
                        :class="{ 'border-t border-gray-200 dark:border-gray-700': index !== 0 }">
                            <div class="flex flex-col flex-grow">
                                <h3 class="text-lg font-medium text-gray-900 dark:text-gray-100">{{ item.name }}</h3>
                                <p class="text-sm font-medium text-gray-500 dark:text-gray-400 mt-2">{{ item.description }}</p>
                            </div>
                            <div class="mt-auto flex justify-end">    

                                <Button @click="executeScenario(item.id)" label="Load" class="flex-auto md:flex-initial text-white">
                                    <ChevronRightIcon class="w-5 h-10 text-white transition-transform transform hover:translate-x-1"/>
                                </Button>
                            </div>
                    </div>
                </div> 
            </div>
        </template>

        <template #grid="slotProps">
            <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-4 gap-4 mt-2">
                <div v-for="(item, index) in slotProps.items" :key="index" class="p-2">
                    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md flex flex-col h-full">
                        <div class="p-4 flex flex-col flex-grow">
                            <h3 class="text-lg font-medium text-gray-900 dark:text-gray-100">{{ item.name }}</h3>
                            <p class="text-sm font-medium text-gray-500 dark:text-gray-400 mt-2">{{ item.description }}</p>
                        </div>
                        <div class="p-2 border-t border-gray-200 dark:border-gray-700 flex justify-end">
                            <Button @click="executeScenario(item.id)" size="small" label="Load" class="flex-auto md:flex-initial text-white">
                                <ChevronRightIcon class="w-6 h-5 text-white transition-transform transform hover:translate-x-1"/>                            
                            </Button>
                        </div>
                    </div>
                </div>
            </div>
        </template>
    </DataView>
    </div>
</template>

<script setup>
import { ChevronRightIcon } from '@heroicons/vue/24/solid';
import { useAuth } from '@websanova/vue-auth/src/v3.js';
import DataView from 'primevue/dataview';
import ProgressSpinner from 'primevue/progressspinner';
import { computed, onMounted, reactive, ref } from 'vue';
import { useRoute, useRouter } from 'vue-router';
import { ScenarioService } from '../../service/ScenarioService.js';

    const router = useRouter()
    const layout = ref('grid');
    const options = ref(['list', 'grid']);
    const loading = ref(true)
    const route = useRoute();
    const auth = useAuth();
const user = computed(() => auth.user());

    
        const fetchUserData = () => {
            return new Promise((resolve, reject) => {
                auth.fetch().then((fetchedUser) => {
                    user.value = fetchedUser;
                    resolve(user.value);
                    
                }).catch((error) => {
                    reject(error);
                });
            });
        };

        const fetchScenarios = (selectedProject) => {
            return ScenarioService.getScenariosProject(selectedProject).then(resp => {
                data.scenarios = resp.data;
            });
        };

    /*onMounted(() => {
        loading.value = true
        //const id = route.params.selProject;  
        //fetchUserData();
        console.log("user after 2:", user.value);

        console.log("user scenario", user.value.selectedProject);

        ScenarioService.getScenariosProject(user.value.selectedProject).then(resp=>{
            console.log("response scenari", resp);
            data.scenarios = resp.data
            loading.value = false
        })
        dataApp.apps = user.value.selectedProject.lstApplications;
        console.log("list apps:", dataApp.apps);
        /*ProjectService.getUserApplications().then(resp=>{
            dataApp.apps = resp.data
            console.info("data apps", resp);
            
        })
        
    });*/

    onMounted(() => {
            loading.value = true;

            fetchUserData()
                .then(() => {
                    console.log("user after fetch:", user.value);
                    console.log("user scenario", user.value.selectedProject);

                    // Assicurati che selectedProject sia definito
                    if (user.value.selectedProject) {
                        return fetchScenarios(user.value.selectedProject);
                    } else {
                        throw new Error('Nessun progetto selezionato.');
                    }
                })
                .then(() => {
                    loading.value = false;
                    dataApp.apps = user.value.selectedProject.lstApplications;
                    console.log("list apps:", dataApp.apps);
                })
                .catch((error) => {
                    console.error("Errore:", error);
                    loading.value = false; // Assicurati di fermare il caricamento anche in caso di errore
                });
        });

    const reloadScenarios = () => {
        console.log("selectedApp", selectedApp.value)

        ScenarioService.getScenariosApplication(selectedApp.value).then(resp=>{
            console.log("response scenari", resp);
            data.scenarios = resp.data
            //loading.value = false
        })
    };
    

    const data = reactive({
        search: null,
        scenarios: []
    })

    const dataApp = reactive({
        search: null,
        apps: []
    })

    const selectedApp = ref(null);  


    const filter = computed(() => {

        if (data.search) {

            return data.scenarios.filter((item) => {
                return data.search
                    .toLowerCase()
                    .split(" ")
                    .every((v) => item.name.toLowerCase().includes(v));
            });
        } else {
            return data.scenarios;
        }
    });

    const executeScenario = (id) => {
        router.push({ name: 'scenario-exec', params: { id: id } });
    }
</script>

<style scoped>
    .header-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.search-bar {
    display: flex;
    align-items: center;
}

.search-icon {
    color:#334155;
    margin-right: 5px;
}

.search-input {
    border: none;
    outline: none;
    box-shadow: none;
    flex: 1;
}

.search-input:focus {
    border: none;
    box-shadow: none;
    outline: none;
}

</style>