<script setup>
import logo from '@/assets/Apollo_simple_logo.webp';
import { useLayout } from '@/layout/composables/layout';
import { useAuth } from '@websanova/vue-auth/src/v3.js';
import { useRouter } from 'vue-router';
import { watch, ref, computed } from 'vue';
import { useRoute } from 'vue-router';
//import AppConfigurator from './AppConfigurator.vue';
import AppProfileMenu from './AppProfileMenu.vue';
import { UserPrefStore } from '../stores/UserPrefStore.js';

const { onMenuToggle, toggleDarkMode, isDarkTheme } = useLayout();
const auth = useAuth();
const logoSrc = ref(logo);
const userPrefStore = UserPrefStore();
const router = useRouter();
const selectedApp = ref(userPrefStore.getSelApp);
const route = useRoute();

async function updateApplication() {
    await userPrefStore.setSelectedApp(selectedApp.value);

    // here scenario_store.fetchApplicationScenarios(); 

}

function redirectProject() {
    router.push({ name: 'projects-list' }); // Specifica il percorso per la pagina "Projects"
}

function appUpdated() {
    selectedApp.value = userPrefStore.getSelApp;
}

const isDropdownDisabled = computed(() => {
    return route.path === '/projects'
});

watch(() => userPrefStore.getSelApp, appUpdated, { immediate: true });
</script>

<template>
    <div class="layout-topbar">
        <div class="layout-topbar-logo-container">
            <button class="layout-topbar-action" @click="onMenuToggle"> <!--class layout-menu-button -->
                <i class="pi pi-bars"></i>
            </button>

            <router-link to="/" class="layout-topbar-logo">
                <img :src="logoSrc" alt="Logo" class="logo-image" />

                <span>APOLLO</span>
            </router-link>

        </div>



        <div class="layout-topbar-actions">
            <div class="layout-config-menu">
                <button type="button" class="layout-topbar-action" @click="toggleDarkMode">
                    <i :class="['pi', { 'pi-moon': isDarkTheme, 'pi-sun': !isDarkTheme }]"></i>
                </button>

                <div class="topbar-project">
                    <button @click="redirectProject()" class="p-button p-button-outlined"
                        v-tooltip="'Click to change the project'"> {{ userPrefStore.user.selectedProject.fe_name
                        }}</button>
                    <!-- <span v-if="userPrefStore.user.selectedProject">
                         <small>PROJECT:</small> {{ userPrefStore.user.selectedProject.fe_name }}
                    </span>   -->
                </div>
                <Dropdown v-model="selectedApp" :options="userPrefStore.availableApp" optionLabel="fe_name"
                    placeholder="Select an Application" class="dropdown-list menu-list" @change="updateApplication()"
                    :disabled="isDropdownDisabled" />
                <!--div class="relative">
                    <button
                        v-styleclass="{ selector: '@next', enterFromClass: 'hidden', enterActiveClass: 'animate-scalein', leaveToClass: 'hidden', leaveActiveClass: 'animate-fadeout', hideOnOutsideClick: true }"
                        type="button" class="layout-topbar-action layout-topbar-action-highlight">
                        <i class="pi pi-palette"></i>
                    </button>
                    <AppConfigurator />
                </div-->
            </div>

            <button class="layout-topbar-menu-button layout-topbar-action"
                v-styleclass="{ selector: '@next', enterFromClass: 'hidden', enterActiveClass: 'animate-scalein', leaveToClass: 'hidden', leaveActiveClass: 'animate-fadeout', hideOnOutsideClick: true }">
                <i class="pi pi-ellipsis-v"></i>
            </button>

            <div class="layout-topbar-menu hidden lg:block">
                <div class="layout-topbar-menu-content">

                    <button
                        v-styleclass="{ selector: '@next', enterFromClass: 'hidden', enterActiveClass: 'animate-scalein', leaveToClass: 'hidden', leaveActiveClass: 'animate-fadeout', hideOnOutsideClick: true }"
                        type="button" class="layout-topbar-action ">
                        <i class="pi pi-user"></i>
                    </button>
                    <AppProfileMenu />


                </div>
            </div>
        </div>
    </div>
</template>

<style scoped>
.logo-image {
    border-radius: 50%;
    width: 40px;
    /* Adjust the size as needed */
    height: 40px;
    /* Adjust the size as needed */
    object-fit: cover;
    /* Ensures the logo scales nicely within the circle */
}
</style>
