<!-- Utilisé pour : -->
<!-- Index.vue / Tous à l'orchestre -->

<!-- Permet de filtrer des contenus grâce à des boutons -->

<template>
    
    <!-- FILTRES -->
    <SectionContent pad="xs" class="theme_tao--filters" role="tablist">
        <DsButton
            v-for="f in filters"
            :key="f.key"
            textColor="invert"
            size="aplati"
            borderColor="invert"
            :aria-pressed="selectedFilterKey === f.key"
            :class="{ 'is-active': selectedFilterKey === f.key }"
            @click="activeFilter = f.key"
        >
            {{ f.label }}
        </DsButton>
    </SectionContent>

    <!-- CARTES HORIZONTALES -->
    <SectionContent class="theme_tao--cardlist">
        <HorizontalCards
            aria-label="Posts Instagram ONDIF"
            hint-key="tao-cardlist-hint-seen"
            :peek="30"
            :fade-width="64"
            :reset-key="activeFilter"
            reset-behavior="smooth"
            :reset-delay-ms="0"
        >

            <DsCard
                v-for="card in cards"
                :key="card.id"
                v-show="isCardVisible(card)"
                class="theme_tao--cardlist--card"
            >
                <div class="theme_tao--cardlist--card--wp">
                    <!-- Image -->
                    <div class="theme_tao--cardlist--card--img">
                        <NuxtImg
                            v-if="card.imgSrc"
                            :src="card.imgSrc"
                            :alt="card.imgAlt"
                            :width="card.imgWidth"
                            :height="card.imgHeight"
                            loading="lazy"
                            sizes="(max-width: 399px) 280px, 350px"
                        />
                    </div>

                    <!-- Content -->
                    <div class="theme_tao--cardlist--card--content">
                        <NuxtLink v-if="card.url" :to="card.url" class="square-card__title-link">
                            <DsHeading as="h5" tone="default">
                                {{ card.title }}
                            </DsHeading>
                        </NuxtLink>
                        <DsHeading v-else as="h5" tone="default">
                            {{ card.title }}
                        </DsHeading>
                        <div v-if="card.descriptionBlocks" class="theme_tao--cardlist--card--description">
                            <StrapiBlocksConvert :blocks="card.descriptionBlocks" />
                        </div>
                    </div>
                </div>
            </DsCard>
            
        </HorizontalCards>
    </SectionContent>
</template>


<script setup>

    import { ref, computed, watch } from 'vue'
    import DsCard from '@root/design-system/components/DsCard.vue'
    import DsHeading from '@root/design-system/primitives/DsHeading.vue'
    import DsButton from '@root/design-system/primitives/DsButton.vue'
    import SectionContent from '../components/section/SectionContent.vue'
    import DsText from '@root/design-system/primitives/DsText.vue'

    //--------------------------------------------------------------------------
    // Filtres
    //--------------------------------------------------------------------------


    // variable pour donner le filtre actif
    // filtre par défaut : le premier
    const activeFilter = ref("")

    //--------------------------------------------------------------------------
    // CONTENUS DES CARTES
    //--------------------------------------------------------------------------

    const { items: homeTousOrchestre } = useStrapi(
        "/api/__strapi__/home-tous-orchestre",
        {
            locale: "fr-FR",
            populate: {
                carte: {
                    illustration: true,
                },
            },
            limit: 1,
        }
    )

    const homeTousOrchestreContent = computed(() => homeTousOrchestre.value?.[0] || null)

    const cards = computed(() => {
        const cartes = homeTousOrchestreContent.value?.carte || []
        const publishedCards = cartes.filter((carte) => carte.publication !== false)

        return publishedCards.map((carte, index) => {
            const image = getStrapiCardImage(carte)
            const category = carte.categorie || ""

            return {
                id: carte.id || String(index + 1),
                imgSrc: image?.url || "",
                imgAlt: image?.alternativeText || image?.caption || carte.titre || "",
                imgWidth: image?.width || undefined,
                imgHeight: image?.height || undefined,
                title: carte.titre || "",
                descriptionBlocks: carte.description || null,
                tags: category ? [category] : [],
                url: carte.url || "",
            }
        })
    })

    const filters = computed(() => {
        const categories = new Map()

        cards.value.forEach((card) => {
            card.tags.forEach((tag) => {
                if (!categories.has(tag)) {
                    categories.set(tag, tag)
                }
            })
        })

        return Array.from(categories, ([key, label]) => ({ key, label }))
    })

    watch(
        filters,
        (availableFilters) => {
            if (!availableFilters.length) {
                activeFilter.value = ""
                return
            }

            if (!availableFilters.some((filter) => filter.key === activeFilter.value)) {
                activeFilter.value = availableFilters[0].key
            }
        },
        { immediate: true }
    )

    const selectedFilterKey = computed(() => activeFilter.value || filters.value[0]?.key || "")

    function isCardVisible(card) {
        return !selectedFilterKey.value || card.tags.includes(selectedFilterKey.value)
    }

    function getStrapiCardImage(carte) {
        const image = carte.illustration || null

        return Array.isArray(image) ? image[0] : image
    }

</script>

<style lang="scss">

    .theme_tao {
        margin-bottom: 50px;

        &--description {
            max-width: 800px;
        }
        &--txt {
            margin-bottom: 35px;
        }
        &--filters {
            display: flex;
            flex-wrap: wrap;
            column-gap: 10px;
            row-gap: 14px;
            .is-active {
                background-color: var(--c-surface);
                color: var(--c-backgroud-brandreverse);
            }
        }
        &--cardlist {
            margin-top: 20px;
            
            &--card {
                background-color: var(--c-surface);
                border-radius: 10px;
                //padding: 50px;
                padding: clamp(18px, 2.4vw, 32px);
                
                &--wp {
                    display: flex;
                    flex-direction: column;
                    align-items: center;
                }
                &--img {
                    width: min(100%, 280px);
                    aspect-ratio: 4 / 5;
                    display: grid;
                    place-items: center;
                    background: #f2f2f2;
                    overflow: hidden;

                    img {
                        width: 100%;
                        height: 100%;
                        display: block;
                        object-fit: cover;
                    }

                    @media (min-width: 400px) {
                        width: min(100%, 350px);
                    }
                }
                &--content {
                    max-width: 320px;
                    padding-top: 20px;
                }
                &--description {
                    display: -webkit-box;
                    overflow: hidden;
                    -webkit-box-orient: vertical;
                    -webkit-line-clamp: 12;
                }
            }
            &--card {
                /* base: mobile-first */
                width: clamp(260px, 81vw, 360px);
            }
            @media (min-width: 400px) {
                &--card {
                    width: clamp(260px, 80vw, 360px);
                }
            }
            @media (min-width: 500px) {
                &--card {
                    width: clamp(280px, 63vw, 460px);
                }
            }
            @media (min-width: 700px) {
                &--card {
                    width: clamp(280px, 60vw, 460px);
                }
            }
            @media (min-width: 1024px) {
                &--card {
                    width: clamp(320px, 33vw, 520px);
                }
            }
            @media (min-width: 1440px) {
                &--card {
                    width: clamp(360px, 26vw, 560px);
                }
            }
        }
    }
</style>
