import { computed, ref } from 'vue'
import { useRoute, useRouter } from 'vue-router'

export function useAppNavigation() {
  const router = useRouter()
  const route = useRoute()

  const popVisible = ref(false)
  const currentRoute = computed(() => route.name)
  const hideMenu = computed(() => !!route.meta.hideMenu)

  function isNavActive(routeName: string) {
    return currentRoute.value === routeName
  }

  function navItemClass(routeName: string) {
    return isNavActive(routeName) ? 'text-primary' : 'text-gray-400'
  }

  function navigateTo(routeName: string) {
    popVisible.value = false
    router.push({ name: routeName })
  }

  function toggleOverflowMenu() {
    popVisible.value = !popVisible.value
  }

  function closeOverflowMenu() {
    popVisible.value = false
  }

  return {
    popVisible,
    currentRoute,
    hideMenu,
    isNavActive,
    navItemClass,
    navigateTo,
    toggleOverflowMenu,
    closeOverflowMenu,
  }
}