<script lang="ts" setup>
import type { DefaultTheme } from 'vitepress/theme'
import { useData } from 'vitepress/dist/client/theme-default/composables/data'
import { isActive } from 'vitepress/dist/client/shared'
import VPLink from 'vitepress/dist/client/theme-default/components/VPLink.vue'
import { computed, ref } from 'vue'

defineProps<{
  item: DefaultTheme.NavItemWithLink
}>()

const { page } = useData()
const textRef = ref<HTMLElement | null>(null)

const wrapperWidth = computed(() => textRef.value?.offsetWidth)
</script>

<template>
  <VPLink
    :class="{
      VPNavBarMenuLink: true,
      CustomNavBarMenuLink: true,
      active: isActive(
        page.relativePath,
        item.activeMatch || item.link,
        !!item.activeMatch
      ),
      disabled: !isActive(
        page.relativePath,
        item.activeMatch || item.link,
        !!item.activeMatch
      ) && !item.link ? 'disabled' : '',
    }"
    :href="item.link"
    :target="item.target"
    :rel="item.rel"
    tabindex="0"
  >
    <span
      ref="textRef"
      v-html="item.text"
    />
  </VPLink>
</template>

<style lang="scss" scoped>
@use '@beeline/design-tokens/scss/tokens/globals/colors';

.VPNavBarMenuLink {
  display: flex;
  align-items: center;
  padding: 0 24px;
  line-height: var(--vp-nav-height);
  font-size: 16px;
  font-weight: 500;
  color: var(--color-text-inactive);
  transition: color 0.25s;
}

.VPNavBarMenuLink.active {
  color: var(--color-text-active);

  &::after {
    position: absolute;
    bottom: 0;
    content: '';
    height: 4px;
    display: none;
    width: calc(v-bind(wrapperWidth) * 1px);
    border-top-left-radius: 12px;
    border-top-right-radius: 12px;
    background-color: colors.$color-background-brand;
  }

  &.active {
    &::after {
      display: block;
    }
  }
}

.disabled {
  opacity: 0.45;
  pointer-events: none;
}

.VPNavBarMenuLink:hover:not(.disabled) {
  color: var(--color-text-active);
}
</style>
