﻿<script setup>
import {useSubscriptionStore} from "@/stores/subscriptionStore.js";
import {computed, ref} from "vue";

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

const colorBorder = computed(() => props.colorBorder);

const subscriptionStore = useSubscriptionStore();

const isSubscribe = computed(() => !subscriptionStore.isSubscribeTo(props.creator.id));

function subscribeToCreator() {
  subscriptionStore.subscribeTo(props.creator.id);
}

// Référence pour contrôler l'affichage du modal
const showUnsubscribeModal = ref(false);

function unsubscribeFromCreator() {
  subscriptionStore.unsubscribeFrom(props.creator.id);
  // Fermer le modal après désabonnement
  showUnsubscribeModal.value = false;
}
</script>

<template>
  <template v-if="isSubscribe">
    <v-btn
        :style="{ 
       width: '150px',
       height: '28px',
        backgroundColor: colorBorder, 
        color: 'white', 
      borderRadius: '8px 0 0 8px',
        padding: '10px 24px',
        display: 'flex',
        alignItems: 'center',
        justifyContent: 'center',
        transition: 'background-color 0.3s ease'
      }"
        @click="subscribeToCreator"
    >
      <div>Follow</div>
    </v-btn>
  </template>

  <template v-else>
    <v-btn
        :style="{ 
       width: '150px',
              height: '28px',
        backgroundColor: colorBorder, 
        color: 'white', 
      borderRadius: '8px 0 0 8px',
        padding: '10px 24px',
        display: 'flex',
        alignItems: 'center',
        justifyContent: 'center',
        transition: 'background-color 0.3s ease'
      }"
        @click="showUnsubscribeModal = true"
    >
      <div>{{ $t('subscribebutton.unsubscribe') }}</div>
    </v-btn>
  </template>

  <v-dialog v-model="showUnsubscribeModal" max-width="500">
    <v-card class="text-center rounded-xl"
            :style="{ border: `3px solid ${creator.colors.menu}` }">

      <div class="flex items-center justify-between py-4 text-2xl font-bold border-b mb-2">
        <div class="flex-1 text-center">
          Déabonnement
        </div>
      </div>

      <v-card-title>Confirmation</v-card-title>
      <v-card-text>Êtes-vous sûr de vouloir vous désabonner ?</v-card-text>
      <v-card-actions class="justify-center px-4 pb-4">
        <v-btn text class="flex-grow-1" variant="outlined"
               :style="{ backgroundColor: 'rgba(255, 255, 255, 0.1)', color: 'rgba(0, 0, 0, 0.4)' }"
               @click="unsubscribeFromCreator">Oui
        </v-btn>

        <v-btn class="flex-grow-1"
               :style="{ borderColor: creator.colors.menu, color: creator.colors.menu }" variant="outlined"
               @click="showUnsubscribeModal = false">
          <div :style="{ color: creator.colors.menu }">Non</div>
        </v-btn>
      </v-card-actions>
    </v-card>
  </v-dialog>
</template>

