﻿<template>
  <div class="flex flex-column w-full">

    <div class="relative w-full shadow-xl rounded-2xl">
      <div ref="mainContainer" class="rounded-b-2xl shadow-2xl"
           :style="{ backgroundColor: creator.colors.bannerTop || '#A30E79', boxShadow: '0 5px 10px rgba(0, 0, 0, 0.3)' }">

        <div>
          <div>

            <!--            Profile and info-->
            <div class="absolute">
              <div>
                <img
                    class="shadow-2xl rounded-full border-solid border-2 absolute z-20 max-w-[190px] ml-10 -mt-10"
                    :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-64 text-white w-25 min-w-60">
                <p class="capitalize text-2xl mt-1">{{ creator.name }}</p>
                <div class="text-md py-1">
                  {{ creator.about.title }}
                </div>
                <div class="text-xs">
                  105 Followers - {{ creator.subscriberCount }} {{ $t('banner.subscription') }}
                </div>
              </div>
            </div>

            <!--  Actions - follow register-->
            <div class="flex flex-col items-center justify-center w-full min-h-24">
              <!-- Social Media Icons -->
              <div class="flex flex-row space-x-6 justify-center">
                <a
                    v-for="socialNetwork in GetSocialsUrls()"
                    :href="socialNetwork.url"
                    target="_blank"
                    class="text-white text-md transform transition-transform duration-200 hover:scale-125 hover:text-blue-500">
                  <v-icon v-if="socialNetwork.icon.includes('mdi')">{{ socialNetwork.icon }}</v-icon>
                  <img v-if="socialNetwork.icon.includes('tiktok')"
                       :src="socialNetwork.icon"
                       class="w-6 h-6 mt-0.5"
                       alt="Tiktok">
                  <img v-if="socialNetwork.icon.includes('websiteIcon')"
                       :src="socialNetwork.icon"
                       class="w-6 h-6 mt-0.5"
                       alt="Website">
                </a>
              </div>
              <!-- Follow and Subscribe Buttons -->
              <div class="flex flex-row space-x-1 justify-center mt-3 mb-2">
                <follow-button
                    :creator="creator"
                    :color-border="creator.colors.menu">
                </follow-button>
                <subscribe-button
                    :creator="creator"
                    :color-border="creator.colors.menu">
                </subscribe-button>
              </div>
            </div>
          </div>

          <div class="absolute bottom-6 right-24 z-30 shadow-2xl rounded-2xl text-white"
               :style="{ backgroundColor: creator.colors.bannerTop}">

            <div class="w-96 h-28 flex flex-col">
              <!-- Section 3 et 4 - Prend 2/3 de la hauteur -->
              <div class="flex flex-row flex-grow-[2] min-h-20">
                <div class="rounded-tl-xl w-1/2   flex items-center justify-center"
                     :style="{ backgroundColor: creator.colors.bannerBottom, opacity: 0.20 }">
                </div>
                <div class="rounded-tr-xl w-1/2 bg-cyan-100 flex items-center justify-center text-xl"
                     :style="{ backgroundColor: creator.colors.bannerBottom}">
                  <div class="absolute left-20"> 0 $</div>
                  <v-btn variant="text"
                         height="80px"
                         width="200px"
                         style="font-size: 18px;">Je supporte
                  </v-btn>
                </div>
              </div>
              <!-- Section 1 - Prend 1/3 de la hauteur -->
              <div class="flex-grow bg-gray-300 flex items-center justify-center rounded-b-2xl"
                   :style="{ backgroundColor: creator.colors.bannerBottom,opacity: 0.80 }">

<textarea

    rows="1"
    placeholder="Message facultatif"
    class="w-full p-2 border border-gray-300 rounded-b-2xl resize-none"
    style="max-height: 300px; overflow-y: hidden; outline: none;"
    oninput="this.style.height = ''; this.style.height = Math.min(this.scrollHeight, 300) + 'px'"></textarea>


              </div>
            </div>
          </div>


        </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">-->
      <!--          &lt;!&ndash; Bouton abonnement affiché seulement si non abonné &ndash;&gt;-->

      <!--        </div>-->
      <!--      </div>-->
      <!--      -->

      <!--    &lt;!&ndash; Conteneur sticky &ndash;&gt;-->
      <!--    <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>-->

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

    <div class="rounded-b-2xl min-h-10 px-36 flex flex-col items-center justify-center"
         :style="{ backgroundColor: creator.colors.bannerBottom, boxShadow: '0 5px 20px rgba(0, 0, 0, 0.3)' }">
      <div class="flex justify-evenly w-full">
        <v-btn variant="text" class="text-white">Présentation</v-btn>
        <v-btn variant="text" class="text-white">Actualité</v-btn>
        <v-btn variant="text" class="text-white">Exclusivité</v-btn>
      </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";
import FollowButton from "@/views/creators/FollowButton.vue";


function GetSocialsUrls() {

  const socials = [];

  if (props.creator.socials.facebookUrl !== null) {
    socials.push({
      icon: "mdi-facebook",
      url: props.creator.socials.facebookUrl
    })
  }
  if (props.creator.socials.instagramUrl !== null) {
    socials.push({
      icon: "mdi-instagram",
      url: props.creator.socials.instagramUrl
    })
  }
  if (props.creator.socials.xUrl !== null) {
    socials.push({
      icon: "mdi-twitter",
      url: props.creator.socials.xUrl
    })
  }
  if (props.creator.socials.linkedInUrl !== null) {
    socials.push({
      icon: 'mdi-linkedin',
      url: props.creator.socials.linkedInUrl
    })
  }
  if (props.creator.socials.tikTokUrl !== null) {
    socials.push({
      icon: '/images/socials/tiktok-white.png',
      url: props.creator.socials.tikTokUrl
    })
  }
  if (props.creator.socials.youtubeUrl !== null) {
    socials.push({
      icon: 'mdi-youtube',
      url: props.creator.socials.youtubeUrl
    })
  }
  if (props.creator.socials.redditUrl !== null) {
    socials.push({
      icon: 'mdi-reddit',
      url: props.creator.socials.redditUrl
    })
  }
  if (props.creator.socials.websiteUrl !== null) {
    socials.push({
      icon: 'mdi-web',
      url: props.creator.socials.websiteUrl
    })
  }

  return socials;
}


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>

