<template>
    <div class="bg-zinc-100 rounded-lg m-5 grid grid-cols-2 gap-10 divide-x divide-solid divide-black py-4 mb-10">
    
        <div class="px-5">
            <p class="text-lg">performances</p>

            <div v-for="(item, index) in events">
                <Collapsible title='placeholder' :modelValue='index <= 10' class="leading-tight py-2 ml-3 text-sm">
                    <template v-slot:title>
                        <div class="gap-1 w-[95%] px-2">
                            <div>
                                {{ item.formatted_date }}: {{item.venue.city}}, {{item.venue.state}}
                                <div class="ml-4 text-[#7F7F7F]">
                                    {{ item.venue.name }}
                                </div>
                            </div>
                        </div>
                    </template>
                    <template v-slot:content>
                        <div v-for="performance in item.program">
                            <div class="italic text-sm ml-16 pt-1">{{performance.work}}</div>
                            <div v-if="performance.ensemble" class="ml-20">
                                {{ performance.ensemble }}
                            </div>
                            <div v-for="performer in performance.performers" class="ml-20">
                                {{ performer.name }}<span v-if="performer.instrument_tags?.length"> - </span>
                                <span v-for="(instrument, index) in performer.instrument_tags">
                                    <span v-if="index !== 0">, </span>
                                    {{ instrument }}
                                </span>
                            </div>
                        </div>
                    </template>
                </Collapsible>
            </div>
        </div>

        <div class="px-5">
            <p class="text-lg">lectures</p>

            <div v-for="yearGroup in lecturesByYear" :key="yearGroup.year">
                <p class="text-sm font-semibold mt-4 text-[#7F7F7F]">{{ yearGroup.year }}</p>
                <div class="leading-tight py-2 ml-3 text-sm" v-for="item in yearGroup.talks">
                    <div class="gap-1">
                        <div>
                            {{item.location}}
                            <div v-for="talk in item.talks" class="ml-4 text-[#7F7F7F]">
                                {{ talk.title }}
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>


<script setup>
    const { data: events } = await useFetch('/api/events', {
        transform: (events) => {
            for (const event of events) {
                let date = new Date(event.start_date)
                event.formatted_date = ("0" + date.getDate()).slice(-2) + "." + ("0" + (date.getMonth() + 1)).slice(-2) + "." + date.getFullYear()
            }
            return events.sort((a,b) => new Date(b.start_date) - new Date(a.start_date))
        }
    })

    const { data: talksData } = await useFetch('/api/talks', {
        transform: (events) => {
            for (const event of events) {
                let date = new Date(event.date)
                event.date = date
                event.formatted_date = ("0" + (date.getMonth() + 1)).slice(-2) + "." + date.getFullYear()
                if(typeof event.title === 'string' || event.title instanceof String) {event.talks = [{'title': event.title}]
                } else {
                    let talks = []
                    for(const talk of event.title){
                        talks.push({"title": talk})
                    }
                    event.talks = talks
                }
            }
            return events.sort((a,b) => new Date(b.date) - new Date(a.date))
        }
    })

    const lecturesByYear = computed(() => {
        if (!talksData.value) return []

        const byYear = {}
        for (const talk of talksData.value) {
            const year = talk.date ? talk.date.getFullYear() : 'Unknown'
            if (!byYear[year]) byYear[year] = []
            byYear[year].push(talk)
        }

        return Object.keys(byYear)
            .sort((a, b) => b - a)
            .map(year => {
                const talks = byYear[year].sort((a, b) => new Date(b.date) - new Date(a.date))
                return { year, talks }
            })
    })

    useHead({
        titleTemplate: 'Michael Winter - Events - Performances and Lectures'
    })
</script>

