<template>

    <div>
        <PageSection tone="jaune" content-size="default">
          <SectionTitle tone="invert" pad="md">
            LA SAISON POUR LES JEUNES
          </SectionTitle>
        </PageSection>
        <PageSection padded_size="md" content-size="default" class="remonter_concert_list">
          <ConcertCardList :highlight-first="false" :limit-cards-on-breakpoint="false">
            <ConcertCard
                v-for="c in concerts"
                :key="c.id"
                :id="c.slug_concert"
                :title="c.titre_concert"
                :dateISO="c.representation_concert?.[0]?.date_debut_representation"
                :dateLabel="formatDateLong(c.representation_concert?.[0]?.date_debut_representation)"
                :lieu="c.representation_concert?.[0]?.lieu_representation?.nom_lieu"
                :adresse_lieu="c.representation_concert?.[0]?.lieu_representation?.nom_lieu"
                :description="c.resume_concert"
                :imageUrl="c.image_illustration_concert?.url"
                :imageAlt="c.image_illustration_concert?.alternativeText"
                :href="`concert-${c.slug_concert}?from=jeune-public`"
            />
          </ConcertCardList>
        </PageSection>
    </div>
</template>



<script setup>

    import { onMounted } from "vue"
    import { formatDateLong } from "@/utils/dateFormat.js"
    const runtimeConfig = useRuntimeConfig()
    const saisonCourante = String(runtimeConfig.public.saison || "").trim()
    const saisonPrecedente = String(runtimeConfig.public.saisonmoins1 || "").trim()
    // PRISE EN COMPTE DE LA DOUBLE SAISON ENTRE L'ANNONCE DE LA NOUVELLE SAISON ET LA FIN DE LA SAISON EN COURS
    // de janvier à août inclus, saisonmoins1 est ajoutée au filtre via $or
    // de septembre à décembre, seule runtimeConfig.public.saison est utilisée
    const inclureSaisonPrecedente = new Date().getMonth() <= 7
    const saisonFilter = inclureSaisonPrecedente && saisonPrecedente
        ? {
            $or: [
                {
                    saison_concert: {
                        nom_saison: {
                            $eq: saisonCourante,
                        },
                    },
                },
                {
                    saison_concert: {
                        nom_saison: {
                            $eq: saisonPrecedente,
                        },
                    },
                },
            ],
        }
        : {
            saison_concert: {
                nom_saison: {
                    $eq: saisonCourante,
                },
            },
        }

    const { concerts, refresh } = useConcerts({
        locale: "fr-FR",
        pageSize: 200,
        populate: {
            saison_concert: true,
            genre_concert: true,
            type_audience_concert: true,
            direction_ondif_concert: { postes_artiste_ondif: true },
            direction_invite_concert: { postes_artiste_invite: true },
            artistes_ondif_concert: { postes_artiste_ondif: true },
            artistes_invite_concert: { postes_artiste_invite: true },
            image_illustration_concert: true,
            images_concert: true,
            videos_concert: true,
            audios_concert: true,
            programme_concert: true,
            representation_concert: { lieu_representation: true },
            liens_youtube_concert: true,
        },
        filters: {
            $and: [
                saisonFilter,
                {
                    $or: [
                        {
                            genre_concert: {
                                nom_genre: {
                                    $eq: "Jeune public",
                                },
                            },
                        },
                        {
                            type_audience_concert: {
                                nom_audience: {
                                    $eq: "Jeune public",
                                },
                            },
                        },
                    ],
                },
            ],
        },
        upcomingOnly: false,
    })

    onMounted(() => {
        if (!concerts.value?.length) {
            refresh()
        }
    })

</script>
