<script lang="ts" setup>
import I18nTranslation from '@/components/I18nTranslation.vue'
import NavUserProfileMenu from '@/components/NavUserProfileMenu.vue'
import Notifications from '@/components/Notifications.vue'
import ThemeSwitcher from '@/components/ThemeSwitcher.vue'
import { useAppConfig } from '@/composable/useAppConfig'
import GlobalSearch from '@/layouts/components/navbar/NavSearchBar.vue'

interface Emit {
  (e: 'update:isDrawerOpen', value: boolean): void
}

const props = defineProps<{
  isDrawerOpen: boolean
}>()

const emit = defineEmits<Emit>()
const { navigationMenu, isNavbarFixed } = useAppConfig()
</script>

<template>
  <VAppBar
    class="layout-navbar"
    :absolute="!isNavbarFixed"
  >
    <div class="navbar-wrapper">
      <!-- small screen navigation drawer toggler -->
      <VAppBarNavIcon
        v-show="$vuetify.display.mdAndDown"
        class="ms-n2"
        @click="emit('update:isDrawerOpen', !props.isDrawerOpen)"
      />

      <template v-if="navigationMenu === 'vertical'">
        <GlobalSearch />
      </template>

      <VSpacer />

      <template v-if="navigationMenu === 'horizontal'">
        <GlobalSearch>
          <VBtn icon>
            <VIcon icon="mdi-magnify" />
          </VBtn>
        </GlobalSearch>
      </template>

      <!-- ThemeSwitcher -->
      <ThemeSwitcher />

      <!-- translation -->
      <I18nTranslation />

      <!-- Notifications -->
      <Notifications />

      <!-- user menu -->
      <NavUserProfileMenu />
    </div>
  </VAppBar>
</template>
