import { computed } from 'vue';
import { useQuery } from '@tanstack/vue-query';
import { ApiMangaRepository } from '../../infrastructure/api/apiMangaRepository';

export function useMangaChapters(mangaId) {
    const mangaRepository = new ApiMangaRepository();

    const query = useQuery({
        queryKey: ['manga', mangaId, 'chapters'],
        queryFn: async () => {
            if (!mangaId.value) {
                return Promise.resolve([]); // Retourne un tableau vide si pas d'ID
            }

            console.log(`useMangaChapters: Chargement des chapitres pour le manga ${mangaId.value}`);
            const response = await mangaRepository.getChapters(mangaId.value);

            // Log pour déboguer
            console.log(`useMangaChapters: ${response.items?.length || 0} chapitres chargés`);

            // Assure de toujours retourner un tableau
            return Array.isArray(response) ? response : response?.items ?? [];
        },
        // Refresh toutes les 30 secondes en arrière-plan
        refetchInterval: 30000,
        // S'assurer que si le composant est visible à nouveau, on récupère les données fraîches
        refetchOnWindowFocus: true,
        // Query activée uniquement si mangaId est défini
        enabled: computed(() => !!mangaId.value),
        // Options pour conserver les données entre les requêtes
        staleTime: 60000, // Considère les données comme "périmées" après 1 minute
        cacheTime: 5 * 60 * 1000 // Garde les données en cache pendant 5 minutes
    });

    // Retourne le résultat de useQuery (contenant data, isLoading, etc.)
    return query;
}