<script setup lang="ts">
import { computed, ref } from 'vue'
import { RouterLink, useRouter } from 'vue-router'

import { getCurrentRoute } from 'src/utilities/vuetils'

const props = defineProps({
  // @ts-ignore
  ...RouterLink.props,
})

let route = ref(getCurrentRoute())
const router = useRouter()
const to = router.resolve(props.to)
const isExternalLink = computed(() => typeof props.to === 'string' && props.to.startsWith('http'))
const isCurrentRoute = computed(() => to.fullPath === route.value.fullPath)
router.afterEach(() => {
  route.value = getCurrentRoute()
})
</script>

<template lang="pug">
span
  a.external-link(
    v-if='isExternalLink'
  )
    slot
  span.current-route(
    v-else-if='isCurrentRoute'
  )
    slot
  router-link(
    v-else
    v-bind='$props'
    custom
    v-slot='{ href, navigate }'
  )
    a(
      v-bind='$attrs'
      :href='href'
      @click='navigate'
    )
      slot
</template>
