<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 { ref } from 'vue';
//import AppConfigurator from './AppConfigurator.vue';
import AppProfileMenu from './AppProfileMenu.vue';

const { onMenuToggle, toggleDarkMode, isDarkTheme } = useLayout();
const auth = useAuth();
const logoSrc = ref(logo);

</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="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>
