<script setup lang="ts">
import { ref, watch, computed } from 'vue';
import { useCustomizerStore } from '~/store/customizer';
import BaseBreadcrumb from '@/components/shared/BaseBreadcrumb.vue';
// import { useEcomStore } from '@/stores/apps/eCommerce';
// import LanguageDD from './LanguageDD.vue';
// import NotificationDD from './NotificationDD.vue';
import ProfileDD from './ProfileDD.vue';
// import Searchbar from './Searchbar.vue';
import RightMobileSidebar from './RightMobileSidebar.vue';
// import Navigations from './Navigations.vue';
import { Icon } from '@iconify/vue';
import Logo from '../logo/Logo.vue';
const customizer = useCustomizerStore();
const route = useRoute();

const pageTitle = ref('');
const pageBreadcrumbs = ref<Array<{text: string}>>([]);
const buttonBack = ref(false);

// Watch route meta for changes
watch(() => route.meta, (meta) => {
    pageTitle.value = (meta.pageTitle as string) || '';
    pageBreadcrumbs.value = (meta.breadcrumbs as Array<{text: string}>) || [];
    buttonBack.value = (meta.buttonBack as boolean) || false;
}, { immediate: true });

const priority = ref(customizer.setHorizontalLayout ? 0 : 0);
watch(priority, (newPriority) => {
    priority.value = newPriority;
});

// Generate pendaftaran URL with query params based on current route
const pendaftaranUrl = computed(() => {
    const baseUrl = '/antrean/pendaftaran';
    const params = new URLSearchParams();
    
    // If on category page, add idKategori
    if (route.path.startsWith('/antrean/kategori/')) {
        const idKategori = route.params.id as string;
        if (idKategori) {
            params.append('idKategori', idKategori);
        }
    }
    
    // If on spesialis page, add kodeSpesialis
    if (route.path.startsWith('/antrean/spesialis/')) {
        const kodeSpesialis = route.params.kode as string;
        if (kodeSpesialis) {
            params.append('kodeSpesialis', kodeSpesialis);
        }
    }
    
    // If on sub-spesialis page, add kodeSubSpesialis
    if (route.path.startsWith('/antrean/subspesialis/')) {
        const kodeSubSpesialis = route.params.kode as string;
        if (kodeSubSpesialis) {
            params.append('kodeSubSpesialis', kodeSubSpesialis);
        }
    }
    
    const queryString = params.toString();
    return queryString ? `${baseUrl}?${queryString}` : baseUrl;
});

// count items
// const store = useEcomStore();
// const getCart = computed(() => {
//     return store.cart;
// });
</script>

<template>
    <v-app-bar elevation="0" :priority="priority" height="70" id="top" class="main-head">
        <v-btn class="hidden-lg-and-up custom-hover-primary" size="small" variant="text" color="primary" icon
            @click.stop="customizer.SET_SIDEBAR_DRAWER">
            <Icon icon="solar:hamburger-menu-line-duotone" height="22" />
        </v-btn>
       <!-- <div class="hidden-sm-and-down hidden-md">
            <v-btn class="custom-hover-primary" size="small" variant="text" color="primary" icon
                @click.stop="customizer.SET_SIDEBAR_DRAWER">
                <Icon icon="solar:hamburger-menu-line-duotone" height="22" />
            </v-btn>
        </div> -->
       <div class="hidden-sm-and-down hidden-md">
            <BaseBreadcrumb :title="pageTitle" :breadcrumbs="pageBreadcrumbs" :button-back="buttonBack" />
        </div>
 

        <v-spacer class="hidden-sm-and-down" />

        <!-- ---------------------------------------------- -->
        <!-- Mobile Logo -->
        <!-- ---------------------------------------------- -->
        <div class="hidden-md-and-up">
            <Logo />
        </div>

        <!-- <div class="hidden-sm-and-down">
            <v-tooltip text="Pendaftaran Antrean Operasi Baru" location="left">
                <template v-slot:activator="{ props }">
                    <v-btn 
                        v-bind="props" color="primary" variant="flat" class="text-none mr-2" size="default"
                        :to="pendaftaranUrl">
                        <Icon icon="mdi:plus" height="20" />
                        Pendaftaran Antrean 
                    </v-btn>
                </template>
            </v-tooltip>
        </div> -->

        <!-- ---------------------------------------------- -->
        <!-- User Profile -->
        <!-- ---------------------------------------------- -->
        <div class="hidden-sm-and-down">
            <ProfileDD />
        </div>

        <!----Mobile ----->
        <v-menu :close-on-content-click="true" class="mobile_popup">
            <template v-slot:activator="{ props }">
                <v-btn icon class="hidden-md-and-up custom-hover-primary" color="primary" variant="text" v-bind="props"
                    size="small">
                    <Icon icon="solar:menu-dots-bold-duotone" height="22" />
                </v-btn>
            </template>
            <v-sheet rounded="lg" elevation="10" class="mt-4 dropdown-box px-4 py-3">
                <div class="d-flex justify-space-between align-center">
                    <RightMobileSidebar />

                    <ProfileDD />
                </div>
            </v-sheet>
        </v-menu>
    </v-app-bar>
</template>
