<template>
  <li ref="linkRef" :class="cls">
    <a :class="linkCls" :href="bindHref" @click="handleClick">
      <slot>{{ title }}</slot>
    </a>
    <ul v-if="$slots.sublist" :class="`${prefixCls}-sublist`">
      <slot name="sublist" />
    </ul>
  </li>
</template>

<script setup>
import { computed, inject, onMounted, ref } from 'vue';
import { anchorInjectionKey } from './context.js';

const props = defineProps({
  /**
   * @zh 锚点链接的文本内容
   * @en The text content of the anchor link
   */
  title: String,
  /**
   * @zh 锚点链接的地址
   * @en The address of the anchor link
   */
  href: String,
})

const prefixCls = 'arco-anchor';
const linkCls = `${prefixCls}-link`;
const linkRef = ref();

const context = inject(anchorInjectionKey, undefined);

onMounted(() => {
  if (props.href && linkRef.value) {
    context?.addLink(props.href, linkRef.value);
  }
});

const bindHref = computed(() => {
  return context?.changeHash ? props.href : 'javascript:void(0);'}
);

const cls = computed(() => [
  `${linkCls}-item`,
  {
    [`${linkCls}-active`]: context?.currentLink === props.href,
  },
]);

const handleClick = (e) => context?.handleClick(e, props.href);
</script>