<template>

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

    <!-- PC Version -->
    <v-card style="z-index: 1000; background-color: #ffff;" class="hidden-sm-and-down" hidden-sm-and-down elevation="5">
      <v-container style="z-index: 2000; margin-bottom: .8%; margin-top: -.3%; margin-right: 1%;">
        <v-row justify="end" style="margin-top: .2%; margin-bottom: -1.2%;">
          <v-menu>
            <template v-slot:activator="{ props }">
              <v-row>
                <!-- Colonne de droite -->
                <v-col class="text-right d-flex align-center justify-end">
                  <div class="d-flex align-center ">
                    <img src="/images/usersmedia/anonyme/profilepictures/profileAnonymeSquare.png"
                      class="header-profile-icon mr-2" alt="Logo">
                    <v-btn flat style="min-width: 200px; font-size: 1.3rem;" dark v-bind="props">
                      {{ currentUserName }}
                    </v-btn>
                  </div>
                </v-col>
              </v-row>
            </template>


            <!-- Dropdown Menu Profile/Connection -->
            <v-list style="padding: 0;">
              <v-list-item>
                <router-link :to="{ name: 'contact' }">
                  <v-btn class="full-width-btn" flat>Inscription</v-btn>
                </router-link>
              </v-list-item>
              <v-list-item v-if="currentUser">
                <v-dialog transition="dialog-top-transition" width="auto">
                  <template v-slot:activator="{ props: activatorProps }">
                     <v-btn v-bind="activatorProps" class="d-flex align-start align-center main-background"
                      elevation="0" outlined="false">
                      <v-icon left class="mr-4">mdi-wallet</v-icon>
                      <p>Bourse</p>
                    </v-btn>
                  </template>

                  <!-- Wallet Modale -->
                  <template v-slot:default="{ isActive }">
                    <v-card style="border-radius: 30px;">
                      <div class="text-center" style=" margin-top: 2%; margin-bottom: 2%;">
                        <v-icon left size="48">mdi-wallet</v-icon>
                        <v-toolbar title="Portefeuille"
                                   style="color: white; width: 750px; background-color: #a30e79; margin-bottom: -6%;"></v-toolbar>
                      </div>
                      <v-card-text class="text-h1 pa-12">
                        <v-row>
                          <v-col>
                            <v-row>
                              <v-col cols="7">
                                <h1 style="margin-bottom: 4%; font-size: 1.3rem;">Balance actuelle</h1>
                                <h1 style="margin-bottom: 4%; font-size: 1.3rem;">Montant reçu</h1>
                                <h1 style="margin-bottom: 4%; font-size: 1.3rem;">Dernier don</h1>
                              </v-col>
                              <v-col>
                                <h1 style="margin-bottom: 4%; font-size: 1.3rem;">{{ currentUser.totalBalance }}$</h1>
                                <h1 style="margin-bottom: 4%; font-size: 1.3rem;">0$</h1>
                                <h1 style="margin-bottom: 4%; font-size: 1.3rem;">2024-10-04</h1>
                                <p></p>
                              </v-col>
                            </v-row>
                          </v-col>
                          <v-col>
                            <v-row>
                              <v-col cols="8">
                                <h1 style="margin-bottom: 4%; font-size: 1.2rem;">Dons</h1>
                                <h1 style="margin-bottom: 4%; font-size: 1.2rem;">Montant retiré</h1>
                              </v-col>
                              <v-col>
                                <h1 style="margin-bottom: 4%; font-size: 1.2rem;">0</h1>
                                <h1 style="margin-bottom: 4%; font-size: 1.2rem;">0$</h1>
                                <p></p>
                              </v-col>
                            </v-row>
                          </v-col>
                        </v-row>
                      </v-card-text>

                      <v-card-actions class="justify-center">
                        <v-btn @click="isActive.value = false" text="Fermer"></v-btn>
                      </v-card-actions>
                    </v-card>

                    <v-card style="border-radius: 25px; margin-top: 3%; height: 30px;">
                      <v-row>
                        <v-col style="margin-right: -2%;" cols="1"
                               class="text-truncate text-center font-weight-bold">#T</v-col>
                        <v-col style="margin-right: -1%; background-color: #fbccee;" cols="1"
                               class="text-truncate text-center font-weight-bold">$</v-col>
                        <v-col cols="2" class="text-truncate text-center font-weight-bold">Date</v-col>
                        <v-col cols="3" class="text-truncate text-center font-weight-bold"
                               style="margin-right: 2%; background-color: #fbccee">Message</v-col>
                      </v-row>
                    </v-card>

                    <v-card style=" border-radius: 25px; margin-top: .5%; max-height: 450px;">
                      <v-row v-for="(transaction, i) in currentUser.userTransactions" :key="i">
                        <v-col style="margin-right: -2%;" cols="1" class="text-truncate">{{ i + 1 }}</v-col>
                        <v-col style="margin-right: -1%; background-color: #fbccee;" cols="1"
                               class="text-truncate">{{ transaction.amount }}$</v-col>
                        <v-col cols="2" class="text-truncate">{{ transaction.created }}</v-col>
                        <v-col cols="5" class="text-truncate" style="margin-right: 2%;  background-color: #fbccee">{{ transaction.tipMessage }}</v-col>
                      </v-row>
                    </v-card>
                  </template>
                </v-dialog>
              </v-list-item>
              <v-list-item v-if="currentUser">
                <v-btn @click="logout()" class="full-width-btn" flat>Déconnecter</v-btn>
              </v-list-item>
            </v-list>
          </v-menu>
        </v-row>
      </v-container>
    </v-card>

    <!-- Mobile version -->
    <v-card style="z-index: 9000; background-color: #f4f4f4;" class="hidden-md-and-up" hidden-md-and-up>
      <v-app-bar app>
        <v-app-bar-nav-icon @click.stop="drawer = !drawer"></v-app-bar-nav-icon>
        <v-row>
          <v-col cols="11" class="d-flex align-center justify-center">

            <!-- Logo Top bar -->
            <img src="/images/hutopymedia/banners/hutopy.png" class="mobile-header" alt="Logo">
          </v-col>
        </v-row>
      </v-app-bar>

      <!-- Left-side Menu -->
      <v-navigation-drawer v-model="drawer" temporary>
        <v-list>
          <v-list-item subtitle="email" title="ANONYME">
            <template v-slot:prepend>
              <img src="/images/usersmedia/anonyme/profilepictures/profileAnonymeSquare.png"
                class="mobile-profile-picture mini-profile-picture " alt="Avatar">
            </template>
          </v-list-item>
        </v-list>

        <!-- Left-side Button -->
        <v-divider></v-divider>
        <v-list density="compact" nav>
          <h1 class="h1-navigation">Navigation</h1>
          <router-link :to="{ name: 'home' }" class="">
            <v-list-item prepend-icon="mdi-home" title="Accueil" value="home"></v-list-item>
          </router-link>
          <RouterLink :to="{ name: 'userbrowser' }">
            <v-list-item prepend-icon="mdi-account-multiple" title="Membres" value="friends"></v-list-item>
          </RouterLink>
          <!-- <v-list-item prepend-icon="mdi-newspaper" title="Contenu" value="content"></v-list-item>-->
          <!-- <v-list-item prepend-icon="mdi-wallet" title="Portefeuille" value="wallet"></v-list-item>-->
          <!-- <v-list-item style="margin-top: 110%;" prepend-icon="mdi-logout" title="Déconnexion"
            value="logout"></v-list-item>-->
        </v-list>
      </v-navigation-drawer>
    </v-card>
  </body>
</template>

<script async setup>
import { onBeforeMount, ref } from 'vue';
import {useClient} from "@/plugins/api.js";
import MyUserModel from "@/models/myUserModel.js";
const client = useClient();

const drawer = ref(false);
const currentUserName = ref("INVITÉ");
let currentUser = null;

onBeforeMount(async () => {
  try {
    const myUser = await client.get("/api/GetMyUser");
    const currentUserModel = MyUserModel.createFromApiResult(myUser.data);
    currentUser = currentUserModel;
    currentUserName.value = currentUserModel.firstName + " " + currentUserModel.lastName
  } catch(error) {
    console.log("User not logged")
  }
})

function logout(){
  localStorage.removeItem('jwt');
  window.location.reload();
}

</script>


<style scoped>
.full-width-btn {
  width: 100%;
  text-align: left;
  padding-left: 24px;
  padding-right: 24px;
  z-index: 1001;
}

.mini-profile-picture {
  border-radius: 100px;
}

.header-profile-icon {
  height: 60px;
  width: 60px;
  border-radius: 50px;
  border: 2px solid #a30e79;
}

.mobile-profile-picture {
  height: 40px;
  border-radius: px;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
  border: 2px solid #a30e79;
  margin-right: 10px
}

.header-banner {
  border-top: 5px solid rgba(107, 0, 101, 1);
  margin-top: 15%;

}

.social-container {
  background-color: #006d77;
  margin-top: -20%;
  font-size: 1.4rem;
  font-weight: 800;
  color: white;
}

.social-container2 {
  background-color: #0baab2;
  font-size: 1.4rem;
  font-weight: 800;
  color: white;
  min-width: 400px;

}

.mobile-header {
  height: 50px;

}
</style>