<template>
    <span v-if="$config.calendar?.enabled">
        <component
            :is="event.level === EventLevel.CustomDay ? 'span' : 'nuxt-link'"
            v-if="range"
            :to="`/${$config.calendar.route}/${eventDays[0]}`"
            class="badge bg-primary text-white"
        >
            <T v-if="month" :params="{ day: event.getRange(year) }">calendar.dates.{{ eventDays[0].month }}</T>
            <template v-else>{{ event.getRange(year) }}</template>
        </component>
        <Tooltip v-if="event.level === EventLevel.CustomDay" :text="$t('profile.calendar.customEvents.disclaimer')">
            <Icon v="user" />
        </Tooltip>
        <template v-else>
            <Flag v-if="event.flag" :alt="$t(`flags_alt.${event.flag.replace(/'/g, '*').replace(/ /g, '_')}`) || ''" :img="`/flags/${event.flag}.png`" />
            <Icon v-else v="arrow-circle-right" />
        </template>
        <T v-if="$te(`calendar.events.${eventName}`, true)" :params="{ param: eventParam }">calendar.events.{{ eventName }}</T>
        <LinkedText v-else :text="eventName" />
        <a
            v-if="ics && event.level !== EventLevel.CustomDay"
            :href="`/api/queer-calendar-${$config.locale}-${year}-${event.getUuid()}.ics`"
            class="small"
            :aria-label="`${$t('crud.download')} .ics`"
            :title="`${$t('crud.download')} .ics`"
        >
            <Icon v="calendar-plus" />
        </a>
        <small v-if="event.localCalendar">({{ event.localCalendar }})</small>
        <a v-if="addButton" href="#" class="text-success" @click.prevent="$emit('add', eventName)">
            <Icon v="plus-circle" hover />
        </a>
        <a v-if="removeButton" href="#" class="text-danger" @click.prevent="$emit('delete', eventName)">
            <Icon v="minus-circle" hover />
        </a>
    </span>
</template>

<script lang="ts">
import Vue from 'vue';
import { Event, EventLevel } from '../src/calendar/helpers.ts';
import type { Day } from '../src/calendar/helpers.js';

export default Vue.extend({
    props: {
        event: { required: true, type: Event },
        year: { default: () => new Date().getFullYear(), type: Number },
        range: { type: Boolean },
        ics: { type: Boolean },
        addButton: { type: Boolean },
        removeButton: { type: Boolean },
        month: { type: Boolean },
    },
    data() {
        return {
            EventLevel,
        };
    },
    computed: {
        eventDays(): Day[] {
            return this.event.getDays(this.year);
        },
        eventName(): string {
            return this.event.name.split('$')[0];
        },
        eventParam(): string | null {
            return this.event.name.split('$')[1] || null;
        },
    },
});
</script>
