﻿<template>
  
  <div>
    
    <v-infinite-scroll :items="contents"
                       :onLoad="fetchContents">

      <!-- TODO: the -mt-4 is necessary because the v-infinite-scroll has some 'top' panel offsetting the list -->
      <div class="flex flex-column gap-4 -mt-4">
        <template v-for="content in contents" :key="content.id">
          <component
              :is="isSmallScreen ? ContentCardSm : ContentCardNormal"
              :content="content"
              @content-deleted="onContentDeleted"
          ></component>
        </template>
      </div>
     
      <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>
    
  </div>
  
</template>

<style>

</style>

<script setup>
import {useClient} from '@/plugins/api.js';
import {onBeforeUnmount, onMounted, ref, watch} from 'vue';
import ContentCardNormal from "@/views/contents/contentcards/NContentCard.vue";
import ContentCardSm from "@/views/contents/contentcards/SmContentCard.vue";

const props = defineProps({
  creatorId: {
    type: String,
    required: true
  }
});

const client = useClient()
const contents = ref([])
const errorMessage = ref()
let last_id = null

const isSmallScreen = ref(false);

const updateScreenSize = () => {
  isSmallScreen.value = window.matchMedia('(max-width: 600px)').matches;
};

onMounted(() => {
  updateScreenSize();
  window.addEventListener('resize', updateScreenSize);
});

onBeforeUnmount(() => {
  window.removeEventListener('resize', updateScreenSize);
});

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

const creatorIdWatcher = watch(
    () => props.creatorId,
    (newCreatorId) => {
      if (newCreatorId) {
        contents.value = []
        last_id = null
        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>
