<script lang="ts">
import { computed, type PropType } from 'vue';

import { inject, keys as injectionKeys } from '../../injection';
import EventPopover from './EventPopover.vue';
import type { Event } from '../../composables/eventstore';


export default {
  name: "EventLink",
  components: { EventPopover },
  props: {
    event: { type: Object as PropType<Event>, required: true },
  },
  setup(props) {
    const links = inject(injectionKeys.links, null);
    const eventLink = computed(() => links?.eventLinkFn(props.event) ?? null);
    return { eventLink };
  },
}
</script>

<template>
<EventPopover :event="event">
  <component :is="eventLink ? 'router-link' : 'span'" :to="eventLink">
    <slot>イベント...{{ event.id.slice(-4) }}</slot>
  </component>
</EventPopover>
</template>
