<template>
  <!-- Navigation Drawer -->
  <v-navigation-drawer
    v-if="
      pageNavigation?.navigationItems?.length ||
      pageNavigation?.footerItems?.length
    "
    id="appPageNavSidebar"
    v-model="navigationDrawer"
    :rail="navigationRail"
    :expand-on-hover="pageNavigationRail"
    permanent
    :order="-2"
    color="page-nav-bg"
  >
    <!-- Navigation List -->
    <div class="tw:h-full">
      <v-list density="compact" nav class="tw:flex tw:flex-col tw:gap-[2px]">
        <!-- item -->
        <div v-for="item in pageNavigation?.navigationItems" :key="item.route">
          <div
            class="tw:border tw:border-solid tw:border-transparent tw:transition-all tw:duration-75"
          >
            <v-list-item
              :disabled="activeRouteName === item.route || !item.route"
              :active="activeRouteName === item.route"
              :value="item.route || ''"
              color="primary"
              class="nav-link"
              link
              @click="navigate(item)"
            >
              <!-- item prepend icon -->
              <template v-if="item.icon" #prepend>
                <v-icon :icon="item.icon" />
              </template>
              <template v-if="item.title" #title>
                {{ item.title }}
              </template>
            </v-list-item>
          </div>
        </div>
      </v-list>
    </div>

    <template #append>
      <v-list density="compact">
        <div v-for="item in pageNavigation?.footerItems" :key="item.route">
          <div
            class="tw:border tw:border-solid tw:border-transparent tw:transition-all tw:duration-75"
          >
            <v-list-item
              :disabled="activeRouteName === item.route || !item.route"
              :active="activeRouteName === item.route"
              :value="item.route || ''"
              color="primary"
              class="nav-link"
              link
              @click="navigate(item)"
            >
              <!-- item prepend icon -->
              <template v-if="item.icon" #prepend>
                <v-icon :icon="item.icon" />
              </template>
              <template v-if="item.title" #title>
                {{ item.title }}
              </template>
            </v-list-item>
          </div>
        </div>
      </v-list>
    </template>
  </v-navigation-drawer>
</template>

<script setup lang="ts">
import { computed, ref } from "vue"
import usePageNavigation, {
  type NavigationItem,
} from "@racletteOrchestrator/composables/usePageNavigation"
import useRouteState from "@racletteOrchestrator/composables/useRouteState"
import { DEFAULT_SLOT_NAME } from "@racletteOrchestrator/router/routeParserHelper"
import useStateSubscriber from "@racletteOrchestrator/composables/useStateSubscriber"

const { state: projectConfig } = useStateSubscriber(["project", "config"])
const { state: pageNavigation } = usePageNavigation()
const { getCompositionLinkForSlotName } = useRouteState()
const currentPageRoute = getCompositionLinkForSlotName(DEFAULT_SLOT_NAME)

const navigationDrawer = ref(true)
const navigationRail = ref(true)

const pageNavigationRail = projectConfig.value?.railPageNavigation || false
const activeRouteName = computed(() => currentPageRoute?.value?.slotValue)

const navigate = (item: NavigationItem) => item.navigateTo()
</script>
