<template>

  <body style="background-color: #f4f4f4;">

    <DefaultLayout></DefaultLayout>
    <v-container>
      <div class="margin-top-mobile">
        <v-row style="margin-top: 4%; margin-bottom: 2%" class="d-flex justify-center align-center">
          <v-col cols="12" xxl="4" xl="4" lg="5" md="7" sm="9"> <v-card class="custom-dialog"
              style="background-color: white;">
              <v-container>
                <!-- Title Card -->
                <v-card-text style="font-weight: 600; margin-top: 20px; margin-bottom: 20px; font-size: 2rem;"
                  class="text-center">
                  Paiement complété
                </v-card-text>
                <v-row justify="center">

                  <!-- Icon Check -->
                  <v-col cols="12" class="text-center">
                    <v-icon color=#a30e79 size="150">mdi-check-circle</v-icon>
                  </v-col>
                </v-row>
                <!-- Informations -->
                <v-row justify="center">
                  <v-col cols="12">
                    <v-card-text style="font-size: 1.2rem; text-align: center;">
                      Merci de supporter
                    </v-card-text>
                    <v-card-text style="font-weight: 600; font-size: 1.6rem; text-align: center; margin-bottom: 10px;">
                      {{ creatorName }}
                    </v-card-text>
                  </v-col>
                </v-row>
                <!-- Ok btn -->
                <v-row>
                  <v-row style="margin-left: 30px; margin-right: 30px; margin-bottom: 10px;">
                    <v-text-field variant="underlined" style=" opacity: 0.80; margin-right: 10px;" v-model="email"
                      label="Email"></v-text-field>
                    <v-btn variant="plain" style="margin-top: 10px;" @click="getReceipt">Reçu</v-btn>
                  </v-row>
                  <v-col cols="12">

                    <v-card-actions class="justify-center">
                      <v-btn color="white" outlined elevation="2"
                        style="font-size: 2rem; width: 175px; height: 45px; margin-bottom: 25px; background-color: #a30e79;"
                        @click="router.push({ path: `/${creatorUserName}` })">Ok</v-btn>
                    </v-card-actions>
                  </v-col>
                </v-row>
              </v-container>
            </v-card>
          </v-col>
        </v-row>
      </div>
      <v-snackbar v-model="errorSnackBar">
        Aucun reçu trouvé pour ce email.
        <template v-slot:actions>
          <v-btn color="red" variant="text" @click="errorSnackBar = false">Fermer</v-btn>
        </template>
      </v-snackbar>
    </v-container>
    <FooterLayout></FooterLayout>

  </body>
</template>

<script async setup>
import DefaultLayout from '@/layouts/DefaultLayout.vue';
import FooterLayout from '@/layouts/FooterLayout.vue';
import { useClient } from '@/plugins/api.js';
import { onBeforeMount, ref } from 'vue';
import { useRouter } from 'vue-router';
const router = useRouter()
const client = useClient();

const queryString = window.location.search;
const urlParams = new URLSearchParams(queryString);
const creatorId = urlParams.get('creatorId')
const creatorName = ref("");
const creatorUserName = ref("");
const email = ref("");
const errorSnackBar = ref(false);


onBeforeMount(async () => {
  const creatorResponse = await client.get(`/api/Users?UserId=${creatorId}`);
  creatorName.value = creatorResponse.data.firstName + " " + creatorResponse.data.lastName;
  creatorUserName.value = creatorResponse.data.userName;
})

async function getReceipt() {
  const receiptResponse = await client.get(`/api/Stripe/GetMyLastReceipt?CreatorId=${creatorId}&Email=${email.value}`);
  const receiptUrl = receiptResponse.data.receiptUrl;

  if (receiptUrl === "") {
    errorSnackBar.value = true;
    return;
  }
  window.open(receiptUrl);

}


</script>

<style scoped>
@media (min-width: 200px) and (max-width: 960px) {
  .margin-top-mobile {
    margin-top: 60px;
  }
}
</style>
