﻿<template>
  <div v-if="creator && creator.id">

    <div class="max-w-[1250px] mx-auto">
    <creator-banner  :creator="creator"
                    @content-posted="contentPosted"
    ></creator-banner>
    </div>
    
    <div class="max-w-[800px] mx-auto">
      <div class="w-full h-full mx-1">
        <content-list :creator-id="creator.id"
                      :contents="contents"
        ></content-list>
      </div>
    </div>
  </div>


  <div v-else>
    <div v-if="loading">
      <v-progress-linear indeterminate></v-progress-linear>
    </div>
    <div v-else>
      <v-card>
        <v-card-text style="text-align: center;">
          Aucun créateur au nom de {{ route.params.creator }}
        </v-card-text>
      </v-card>
    </div>
  </div>
</template>

<script async setup>

import {watch, ref, onBeforeMount} from 'vue';
import {useRoute} from 'vue-router';
import {useClient} from "@/plugins/api.js";
import CreatorBanner from "@/views/creators/CreatorBanner.vue";
import ContentList from "@/views/contents/ContentList.vue";

const creator = ref(null)
const loading = ref(true)
const contents = ref([])

const client = useClient()
const route = useRoute()

function contentPosted(content) {
  contents.value.unshift(content)
}

onBeforeMount(async () => await fetchCreatorData(route.params.creator))

watch(
    () => route.params.creator,
    async () => await fetchCreatorData(route.params.creator)
)

const fetchCreatorData = async (creatorAlias) => {
  try {
    loading.value = true
    const response = await client.get(`/api/creators/@${creatorAlias}`)
    creator.value = response.data
  } catch (error) {
    console.error(`Error fetching content: ${error}`)
  } finally {
    loading.value = false
  }
}

</script>
