<script setup lang="ts">
//#region --import--.
import SearchBar from "~/components/SearchBar.vue";
import { ref } from "vue";
import { useTMDB } from "~/composables/tMDB";
//#endregion

//#region --Declaration--.
const { fetchPopularMovies } = useTMDB();
//#endregion

//#region --Type--.
interface Movie {
  id: number;
  title: string;
  poster_path: string | null;
  vote_average: number;
  release_date: string;
}
//#endregion

//#region --Data/refs--.
const isInitialLoading = ref(true);
const isLoadingMore = ref(false);
const movies = ref<Movie[]>([]);
const currentPage = ref(1);
const totalPages = ref(0);
//#endregion

//#region --Function--.
// Fetch popular movies
const fetchMovies = async (page: number) => {
  try {
    isLoadingMore.value = true;
    const data = await fetchPopularMovies(page);
    console.log("data in fetchMovies", data);

    if (page === 1) {
      movies.value = data.results;
    } else {
      movies.value = [...movies.value, ...data.results];
    }

    totalPages.value = data.total_pages;
    currentPage.value = page;
  } catch (error) {
    console.error("Error fetching popular movies:", error);
  } finally {
    isInitialLoading.value = false;
    isLoadingMore.value = false;
  }
};
fetchMovies(1)
//#endregion
</script>

<template>
  <section>
    <h1 class="text-4xl font-bold mb-8 text-center">Découvrez les films populaires</h1>
    <!-- Barre de recherche -->
    <search-bar placeholder="Rechercher un film..."/>
    <!-- Loading Skeleton -->
    <skeleton-movies-loader :is-initial-loading="isInitialLoading" :skeleton-number="20" />
    <!-- Liste des films -->
    <pre>{{ movies }}</pre>
  </section>
</template>

<style scoped>

</style>