<template>
  <component :is="type" v-bind="linkProps(to)">
    <slot />
  </component>
</template>

<script lang="ts">
import { isExternal as getIsExternal } from '@/portal/utils/validate'
import { computed, defineComponent } from 'vue-demi'

export default defineComponent({
  name: 'NavbarLink',
  props: {
    to: {
      type: String,
      required: true
    }
  },
  setup (props) {
    const isExternal = computed(() => getIsExternal(props.to))
    const type = computed(() => isExternal.value ? 'a' : 'router-link')

    function linkProps (to: string) {
      if (isExternal.value) {
        return {
          href: to,
          target: '_blank',
          rel: 'noopener'
        }
      }
      return {
        to
      }
    }

    return {
      type,
      isExternal,
      linkProps
    }
  }
})
</script>
