<template>
  <div v-if="user && user.id">
    <CreatorBanner
        :user="user"
    ></CreatorBanner>
    <div>
      
    <div class="flex flex-column w-max-[100] ">
      
    </div>
  
  
  <!--    <div class="w-full border-b-2 p-6">-->
  <!--      <PostMessage content-id="00000001-0000-0000-0000-000000000001"></PostMessage>-->
  <!--    </div>-->
  <!--    -->
  <!--    <div class="w-full border-b-2 p-6">-->
  <!--      <h2 class="font-sans font-semibold">Commentaires</h2>-->
  <!--      <MessageList content-id="00000001-0000-0000-0000-000000000001"></MessageList>-->
  <!--    </div>-->
  
      <PostContentMenu></PostContentMenu>

      <StripePayment :creator-id="user.id"></StripePayment>

      <div class="flex flex-col items-center">
        <div class="max-w-[800px] border-l-2 border-r-2 border-gray-200 px-4 ">
          <PostCard v-for="post in posts"
                    :key="post.id"
                    :post="post"
                    class=" bg-white w-full content-center rounded-3xl mt-2">
          </PostCard>
        </div>
      </div>
      
    </div>
  </div>

  <!-- Fallback when user try to access a non-existing creator -->
  <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>
</template>

<script async setup>

import PostContentMenu from '@/views/main/PostContentMenu.vue'
import PostCard from "@/views/main/PostCard.vue"
import posts from "@/views/main/posts.json"
import PostMessage from "@/views/messages/PostMessage.vue";
import MessageList from "@/views/messages/MessageList.vue";
import {onBeforeMount, ref} from "vue";
import {useClient} from "@/plugins/api.js";
import {useRoute} from "vue-router";
import CreatorBanner from "@/views/main/CreatorBanner.vue";
import StripePayment from "@/views/StripePayment.vue";

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

const user = ref(null);

onBeforeMount(async() => {
  const response = await client.get(`/api/Users?UserName=${route.params.creator}`)
  user.value = response.data
})

</script>

<style scoped>

</style>
