<template>
    <div>
        <table v-if="events.length > 1" class="event-table">
            <tr v-for="event in events" :key="event.id">
                <td>
                    <div v-if="shouldDisplay('name')" class="event-name">{{ event.name }}</div>
                    <div>{{ formatDateOrDay(event.date, event.dayOfWeek) }}</div>
                    <div v-if="shouldDisplay('time')">{{ formatTime(event.time) }} <span v-if="event.endTime"> - {{ formatTime(event.endTime) }}</span> Uhr</div>
                    <div v-if="shouldDisplay('place')">{{ event.eventPlace?.name }}</div>
                    <div v-if="shouldDisplay('description')" class="description">{{ event.description }}</div>
                    <div v-if="shouldDisplay('contactPerson')">{{ event.contactPersons.map(cp => cp.name).join(', ') }}</div>
                    <div v-if="shouldDisplay('institution')">{{ event.institution?.name }}</div>
                    <div v-if="shouldDisplay('type')">{{ event.eventType?.caption }}</div>
                </td>
            </tr>
        </table>
        <div v-else-if="events.length === 1" :class="events[0].alsoOnHomepage && config.id === 'home' ? 'homepage' : ''">
            <div v-if="shouldDisplay('name')" class="event-name">{{ events[0].name }}</div>
            <div>{{ formatDateOrDay(events[0].date, events[0].dayOfWeek) }}</div>
            <div v-if="shouldDisplay('time')">{{ formatTime(events[0].time) }} <span v-if="events[0].endTime"> - {{ formatTime(events[0].endTime) }}</span> Uhr</div>
            <div v-if="shouldDisplay('place')">{{ events[0].eventPlace?.name }}</div>
            <div v-if="shouldDisplay('description')" class="description">{{ events[0].description }}</div>
            <div v-if="shouldDisplay('contactPerson')">{{ events[0].contactPersons.map(cp => cp.name).join(', ') }}</div>
            <div v-if="shouldDisplay('institution')">{{ events[0].institution?.name }}</div>
            <div v-if="shouldDisplay('type')">{{ events[0].eventType?.caption }}</div>
        </div>
    </div>
</template>

<script>
import axios from '@/axios';
import { format } from 'date-fns'; 
import { formatTime } from '@/utils/strings';

export default {
    name: 'EventRender',
    props: {
        config: {
            type: Object,
            required: true,
        }
    },
    data() {
        return {
            events: [],
        };
    },
    async created() {
        await this.fetchEvents();
    },
    methods: {
        formatTime,
        async fetchEvents() {
            console.log(this.config);
            try {
                const response = await axios.post('/events/filter', 
                    this.config
                );
                this.events = response.data.events;
            } catch (error) {
                console.error('Fehler beim Abrufen der Events', error);
            }
        },
        shouldDisplay(field) {
            return this.config.display.includes(field);
        },
        formatDateOrDay(date, dayOfWeek) {
            if (date) {
                return format(new Date(date), 'dd.MM.yyyy');
            } else if (dayOfWeek !== null && dayOfWeek !== undefined) {
                const daysOfWeek = ['Sonntag', 'Montag', 'Dienstag', 'Mittwoch', 'Donnerstag', 'Freitag', 'Samstag'];
                return daysOfWeek[dayOfWeek];
            }
            return '';
        }
    }
};
</script>

<style scoped>
.event-name {
    font-weight: bold;
}
.event-table {
    border-collapse: collapse;
}
.event-table td {
    border: 1px solid black;
}
.homepage {
    border: 1px solid #9400ff;
    padding: 0.5em;
    text-align: center;
}
.description {
    padding: 0.5em 0;
}
</style>
