﻿<template> 
    <div class="fixed z-50 bottom-10 right-10 flex flex-column">
      <div
          v-if="showPopup"
          ref="popup"
          class="z-50 shadow-md shadow-gray-500 rounded-2xl"
      >
        <div class="bg-fuchsia-900 p-4 rounded-t-2xl font-semibold self-center text-white text-center">
          Je Soutiens!
        </div>
        <div class="bg-gray-100 rounded-b-2xl p-4">
          <div class="mx-2">
            <StripePayment :creator-id="creatorId"></StripePayment>
          </div>
        </div>
      </div>

      <div
          @click="togglePopup"
          ref="popupButton"
          class="bg-purple rounded-full w-16 h-16 flex justify-center items-center self-end mt-4 cursor-pointer"
          style="background: radial-gradient(circle, rgba(163,14,121,1) 50%, rgba(107,0,101,1) 100%); border: 2px solid white;"
      >
        <v-icon class="text-2xl">mdi-gift-outline</v-icon>
      </div>
    </div>
</template>

<script setup>
import {ref, onMounted, onUnmounted, defineProps} from 'vue';
import StripePayment from "@/views/StripePayment.vue";

const showPopup = ref(false);
const popup = ref(null);
const popupButton = ref(null);

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


const togglePopup = () => {
  showPopup.value = !showPopup.value;
};

const handleClickOutside = (event) => {
  if (
      popup.value &&
      !popup.value.contains(event.target) &&
      !popupButton.value.contains(event.target) &&
      !event.target.closest('.bg-purple')
  ) {
    showPopup.value = false;
  }
};

onMounted(() => {
  document.addEventListener('click', handleClickOutside);
});

onUnmounted(() => {
  document.removeEventListener('click', handleClickOutside);
});
</script>

<style scoped>
.bg-fuchsia-900 {
  background-color: #9c27b0;
}

.bg-gray-100 {
  background-color: #f5f5f5;
}

.bg-purple {
  background-color: #9c27b0;
}
</style>
