﻿<template>

  <v-infinite-scroll :items="contents"
                     :onLoad="fetchContents"
                     class="gap-2">

    <template v-for="content in contents" :key="content">
      <content-card :content="content"               
                    @content-deleted="onContentDeleted"
      ></content-card>
    </template>

    <template v-slot:empty>
      Il n'y a pas plus de contenus
    </template>

    <template v-slot:error>
      <v-alert type="error">{{ errorMessage }}</v-alert>
    </template>

  </v-infinite-scroll>

</template>

<script setup>

import {useClient} from '@/plugins/api.js';
import {ref, watch} from 'vue';
import ContentCard from "./ContentCard.vue";

const props = defineProps({
  creatorId: {
    type: String,
    required: true
  },
  contents: {
    type: Array,
    default: () => [],
  },
});

const client = useClient()
const contents = ref(props.contents)
const errorMessage = ref()
let last_id = null

async function onContentDeleted(contentId) {
  contents.value = contents.value.filter(c => c.id !== contentId)
}

const creatorIdWatcher = watch(
    () => props.creatorId,
    (newCreatorId) => {
      if (newCreatorId) {
        // Reset contents and last_id when the creatorId changes
        contents.value = []
        last_id = null
        // Fetch contents for the new creator
        fetchContents({
          done: () => {
          }
        });
      }
    })

async function fetchContents({done, page_size = 10}) {
  if (props.creatorId == null) return
  
  try {
    let uri = `/api/contents/creator/${props.creatorId}?page_size=${page_size}`
    if (last_id !== null) uri = uri + `&last_id=${last_id}`

    const response = await client.get(uri)

    if (response.status >= 200 && response.status < 300) {

      const contentCount = response.data.length

      if (contentCount > 0) {
        contents.value.push(...response.data)
        const [last_content] = response.data.slice(-1)
        last_id = last_content.id
      }

      if (contentCount < page_size)
        done('empty')
      else
        done('ok')
    }
  } catch (error) {
    console.error("Failed to fetch posts", error);
    errorMessage.value = error.message || "Failed to fetch contents";
    done('error')
  }
}

</script>