<script setup>
  import {
    HorizontalNavGroup,
    HorizontalNavLink,
  } from '@layouts/components'

  import navItems from '@/navigation/vertical'
  import navItemsHorizontal from '@/navigation/horizontal'
  const router = useRouter()

  //Configurações do Tema
  import { useConfigStore } from '@core/stores/config'
  import {
    cookieRef,
    namespaceConfig
  } from '@layouts/stores/config'
  import { useStorage } from '@vueuse/core'
  import { useTheme } from 'vuetify'

  const configStore = useConfigStore()
  const vuetifyTheme = useTheme()

  const setPrimaryColor = useDebounceFn(color => {
    vuetifyTheme.themes.value[vuetifyTheme.name.value].colors.primary = color
    cookieRef(`${vuetifyTheme.name.value}ThemePrimaryColor`, null).value = color
    useStorage(namespaceConfig('initial-loader-color'), null).value = color
  }, 100)

  //Configurações personalizadas para remover a personalização
  setPrimaryColor('#F27405')

  //Forçar Claro
  configStore.theme = 'light'

  // Components
  import Footer from '@/layouts/components/Footer.vue'
  import NavSearchBar from '@/layouts/components/NavSearchBar.vue'
  import UserProfile from '@/layouts/components/UserProfile.vue'

  // @layouts plugin
  import { VerticalNavLayout } from '@layouts'

  // SECTION: Loading Indicator
  const isFallbackStateActive = ref(false)
  const refLoadingIndicator = ref(null)

  watch([
    isFallbackStateActive,
    refLoadingIndicator,
  ], () => {
    if (isFallbackStateActive.value && refLoadingIndicator.value)
      refLoadingIndicator.value.fallbackHandle()
    if (!isFallbackStateActive.value && refLoadingIndicator.value)
      refLoadingIndicator.value.resolveHandle()
  }, { immediate: true })

  const windowsWidth = window.innerWidth
  const isMobile = ref(false)

  if (windowsWidth < 768) {
    isMobile.value = true
  }

  const menuAberto = ref(false)
  const valueMenu = ref(1)

  const toggleMenu = () => {
    menuAberto.value = !menuAberto.value

    return menuAberto.value
  }

  watch(() => menuAberto.value, (value) => {
    console.log('Menu Aberto:', value)
    if (value) {
      valueMenu.value = 4
    }
  })

  const checkRouterActive = (route) => {
    return router.currentRoute.value.path.includes(route)
  }

  const resolveNavItemComponent = item => {
    if ('children' in item)
      return HorizontalNavGroup

    return HorizontalNavLink
  }
</script>

<template>
  <VerticalNavLayout :nav-items="navItems">
    <!-- 👉 navbar -->
    <template #navbar="{ toggleVerticalOverlayNavActive }" v-if="!isMobile">

      <div class="d-flex flex-row align-center w-100 mt-1">
        <RouterLink to="/" class="d-flex align-center gap-x-3" :style="isMobile ? 'margin-left: -7px;' : ''">
          <img src="@images/logo.png" alt="logo" class="app-logo d-flex align-content-center">
        </RouterLink>

        <NavSearchBar trigger-btn-class="ms-lg-n3" />

        <div class="layout-horizontal-nav">
          <div class="horizontal-nav-content-container">
            <ul class="nav-items d-flex flex-row gap-x-2 justify-center">
              <Component :is="resolveNavItemComponent(item)" v-for="(item, index) in navItemsHorizontal" :key="index"
                :item="item" />
            </ul>
          </div>
        </div>


        <div class="d-flex flex-row align-center ml-auto">
          <UserProfile />
        </div>
      </div>
    </template>

    <template #navbar="{ toggleVerticalOverlayNavActive }" v-else>
      <RouterLink to="/" class="d-flex align-center gap-x-3" :style="isMobile ? 'margin-left: -7px;' : ''">
        <img src="@images/logo-white.png" alt="logo" class="app-logo d-flex align-content-center">
      </RouterLink>

      <VSpacer />

      <NavSearchBar trigger-btn-class="ms-lg-n3" />

      <UserProfile />

    </template>

    <AppLoadingIndicator ref="refLoadingIndicator" />

    <!-- 👉 Pages -->
    <RouterView v-slot="{ Component }">
      <Suspense :timeout="0" @fallback="isFallbackStateActive = true" @resolve="isFallbackStateActive = false">
        <Component :is="Component" />
      </Suspense>

      <Footer />
    </RouterView>

    <!-- 👉 Footer -->
    <template #footer="{ toggleVerticalOverlayNavActive, isOverlayNavActive }">


      <!-- Menu Footer -->
      <VBottomNavigation v-model="valueMenu" :elevation="1" grow class="menu-footer" v-if="isMobile">
        <VBtn to="/" :class="router.currentRoute.value.path == '/' ? 'menu-footer-ativo' : ''">
          <VIcon icon="tabler-home" size="25" />
          <v-fade-transition><span v-if="router.currentRoute.value.path == '/'">-</span></v-fade-transition>
        </VBtn>

        <VBtn to="/vagas" :class="checkRouterActive('vagas') == true ? 'menu-footer-ativo' : ''">
          <VIcon icon="tabler-briefcase" size="25" />
          <v-fade-transition><span v-if="checkRouterActive('vagas')">-</span></v-fade-transition>
        </VBtn>

        <VBtn to="/eventos" :class="checkRouterActive('eventos') == true ? 'menu-footer-ativo' : ''">
          <VIcon icon="tabler-ticket" size="25" />
          <v-fade-transition><span v-if="checkRouterActive('eventos')">-</span></v-fade-transition>
        </VBtn>

        <VBtn @click="toggleVerticalOverlayNavActive(toggleMenu())"
          :class="isOverlayNavActive ? 'menu-footer-ativo' : ''">
          <VIcon icon="tabler-menu-2" size="25" />
          <v-fade-transition><span v-if="isOverlayNavActive">-</span></v-fade-transition>
        </VBtn>
      </VBottomNavigation>
    </template>

    <!--
      👉 Customizer 
      <TheCustomizer />-
    -->
  </VerticalNavLayout>
</template>
