<template>
    <div>
        <MangaVolume
            v-for="(volume, index) in volumes"
            :key="volume.number"
            :volume="volume"
            :mangaSlug="mangaSlug"
            :mangaId="mangaId"
            :isOpen="expandedVolumes.has(volume.number)"
            @toggle="handleVolumeToggle" />
    </div>
</template>

<script setup>
    import { ref, watch } from 'vue';
import MangaVolume from './MangaVolume.vue';

    const props = defineProps({
        volumes: {
            type: Array,
            required: true
        },
        mangaSlug: {
            type: String,
            required: true
        },
        mangaId: {
            type: Number,
            required: true
        },
        expandAll: {
            type: Boolean,
            default: false
        }
    });

    const emit = defineEmits(['update:expandAll']);

    // Set pour stocker les numéros de volumes ouverts
    const expandedVolumes = ref(new Set());

    // Initialiser avec le premier volume ouvert par défaut
    watch(() => props.volumes, (newVolumes) => {
        if (newVolumes.length > 0 && expandedVolumes.value.size === 0) {
            // Ouvrir le premier volume (volume 00) par défaut
            expandedVolumes.value.add(newVolumes[0].number);
        }
    }, { immediate: true });

    // Gérer l'expansion de tous les volumes
    watch(() => props.expandAll, (shouldExpand) => {
        if (shouldExpand) {
            // Ouvrir tous les volumes
            props.volumes.forEach(volume => {
                expandedVolumes.value.add(volume.number);
            });
        } else {
            // Fermer tous les volumes (y compris le volume 00)
            expandedVolumes.value.clear();
        }
    });

    const handleVolumeToggle = (volumeNumber) => {
        if (expandedVolumes.value.has(volumeNumber)) {
            expandedVolumes.value.delete(volumeNumber);
        } else {
            expandedVolumes.value.add(volumeNumber);
        }

        // Émettre l'état d'expansion
        const allExpanded = props.volumes.length > 0 &&
                           props.volumes.every(volume => expandedVolumes.value.has(volume.number));
        emit('update:expandAll', allExpanded);
    };

    // Méthode publique pour contrôler l'expansion
    const expandAllVolumes = () => {
        props.volumes.forEach(volume => {
            expandedVolumes.value.add(volume.number);
        });
        emit('update:expandAll', true);
    };

    const collapseAllVolumes = () => {
        expandedVolumes.value.clear();
        // Ne plus garder le premier volume ouvert, tous les volumes sont fermés
        emit('update:expandAll', false);
    };

    // Exposer les méthodes pour le composant parent
    defineExpose({
        expandAllVolumes,
        collapseAllVolumes
    });
</script>
