<script setup>
import { layoutConfig } from '@layouts'
import { can } from '@layouts/plugins/casl'
import { useLayoutConfigStore } from '@layouts/stores/config'
import {
  getComputedNavLinkToProp,
  getDynamicI18nProps,
  isNavLinkActive,
} from '@layouts/utils'
import { useCookieStore } from '@layouts/stores/config'
const cookieStore = useCookieStore()

const props = defineProps({
  item: {
    type: null,
    required: true,
  },
})


const configStore = useLayoutConfigStore()
const hideTitleAndBadge = configStore.isVerticalNavMini()
</script>

<template>
  <li v-if="can(item.action, item.subject) || item.public" class="nav-link" :class="{ disabled: item.disable }" :key="item.title">
    <Component :is="item.to ? 'RouterLink' : 'a'" v-bind="getComputedNavLinkToProp(item)" :key="item.title"
      :class="{ 'router-link-active router-link-exact-active': isNavLinkActive(item, $router) }" :href="item.link ? item.link : ''">
      <Component :is="layoutConfig.app.iconRenderer || 'div'" :key="item.title + 'div'"
        v-bind="item.icon || layoutConfig.verticalNav.defaultNavItemIconProps" class="nav-item-icon" />
      <TransitionGroup name="transition-slide-x" :key="item.title">
        <!-- 👉 Title -->
        <Component :is="layoutConfig.app.i18n.enable ? 'i18n-t' : 'span'" v-show="!hideTitleAndBadge" :key="item.title + 'item'"
          class="nav-item-title font-weight-bold" v-bind="getDynamicI18nProps(item.title, 'span')">
          {{ item.title }}
        </Component>

        <!-- 👉 Badge -->
        <VIcon icon="tabler-chevron-right"  class="nav-item-badge-icon" :key="item.title + 'icon'"  />
      </TransitionGroup>
    </Component>

    <VDivider class="my-2" :style="isNavLinkActive(item, $router) ? 'opacity: 0' : ''" />
  </li>
</template>
