﻿<template>
  <div class="relative w-full">
    <div ref="mainContainer" class="rounded-b-2xl pt-2 pb-1"
         :style="{ backgroundColor: creator.colors.bannerBottom || '#A30E79', borderBottom: '5px inset' + (creator.colors.menu || '#000') }">

      <!-- Logo & User Info -->
      <div class="relative z-20">
        <div class="flex flex-row items-center py-2">
          <div>
            <img
                class="shadow-2xl rounded-full border-solid border-4 absolute z-20 max-w-[190px] ml-15 -mt-32"
                :src="creator.images.logo ? creator.images.logo : '/images/placeholders/logo.png'"
                alt="Profile Picture"
                :style="{ borderColor: creator.colors.accent || '#A30E79', height: '190px'}"
            />
          </div>
          <div class="ml-72 text-white mr-10">
            <p class="capitalize text-4xl font-bold">{{ creator.name }}</p>
            <div class="text-2xl text-white flex flex-row align-center">
              {{ creator.about.title }}
              <creator-about class="px-2" :creator="creator"></creator-about>
            </div>
          </div>
          <div class="flex flex-row ml-auto space-x-2.5">
            <donation-button-banner
                :color-border="creator.colors.menu"
                :color-accent="creator.colors.accent"
                :creator-id="creator.id"
                :creator-name="creator.name"
                :creator-logo="creator.images.logo"
                iconColorClass="text-white">
            </donation-button-banner>
            <div class="flex flex-column">
              <!-- Bouton abonnement affiché seulement si non abonné -->
              <subscribe-button
               
                  :creator="creator"
                  :color-border="creator.colors.menu">
              </subscribe-button>
              <div class="font-bold text-white flex justify-end mr-5 py-1.5">
                {{ creator.subscriberCount }} {{ $t('banner.subscription') }}
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- Conteneur sticky -->
    <div v-show="isSticky" class=" sticky-header fixed top-14 left-0 right-0 w-full z-20"
         :style="{ backgroundColor: creator.colors.bannerBottom || '#A30E79', borderBottom: '5px inset' + (creator.colors.menu || '#000') }">
      <div class="shadow-3xl flex flex-row items-center py-2 px-2">
        <div>
          <img
              class="max-w-[40px] max-h-[40px] ml-5 rounded-full"
              :src="creator.images.logo ? creator.images.logo : '/images/placeholders/logo.png'"
              alt="Profile Picture"
              :style="{ borderColor: creator.colors.accent || '#A30E79', height: '190px'}"
          />
        </div>
        <div class="ml-5 text-white">
          <p class="capitalize text-2xl font-bold">{{ creator.name }}</p>
        </div>
        <div class="ml-auto flex flex-row space-x-2.5 mr-3 ">
        
          <donation-button-banner-slim 
             class=""
              :color-border="creator.colors.menu"
              :color-accent="creator.colors.accent"
              :creator-id="creator.id"
              :creator-name="creator.name"
              :creator-logo="creator.images.logo"
             >
          </donation-button-banner-slim>

          <!-- Afficher le bouton d'abonnement seulement si l'utilisateur n'est pas abonné -->
          <subscribe-button-slim
              v-if="!isSubscribed"
              :creator="creator"
              :color-border="creator.colors.menu">
          </subscribe-button-slim>
          
        </div>
      </div>
    </div>
  </div>
</template>


<script setup>
import { ref, onMounted, computed } from 'vue';
import { useSubscriptionStore } from "@/stores/subscriptionStore.js";
import SubscribeButton from "@/views/creators/SubscribeButton.vue";
import DonationButtonBanner from "@/views/creators/DonationButtonBanner.vue";
import CreatorAbout from "@/views/creators/CreatorAbout.vue";
import SubscribeButtonSlim from "@/views/creators/SubscribeButtonSlim.vue";
import DonationButtonBannerSlim from "@/views/creators/DonationButtonBannerSlim.vue";

const props = defineProps({
  creator: { type: Object, required: true }
});

const subscriptionStore = useSubscriptionStore();

// Calculer si l'utilisateur est abonné
const isSubscribed = computed(() => subscriptionStore.isSubscribeTo(props.creator.id));

const isSticky = ref(false);
const mainContainer = ref(null);

onMounted(() => {
  const observer = new IntersectionObserver(
      ([entry]) => {
        isSticky.value = !entry.isIntersecting;
      },
      { threshold: 0 }
  );

  if (mainContainer.value) {
    observer.observe(mainContainer.value);
  }
});
</script>

