<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 v-if="!currentUser">
                <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 }">
                    <div class="d-flex justify-center">
                      <v-btn v-bind="activatorProps"
                        class="d-flex align-start align-center main-background full-width-btn" elevation="0"
                        outlined="false">
                        <v-icon left class="mr-4">mdi-wallet</v-icon>
                        <p>Bourse</p>
                      </v-btn>
                    </div>
                  </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>
                              </v-col>
                              <v-col>
                                <h1 style="margin-bottom: 4%; font-size: 1.3rem;">{{ currentUser.totalBalance }}$</h1>
                              </v-col>
                            </v-row>
                          </v-col>
                          <v-col>

                          </v-col>
                        </v-row>
                      </v-card-text>

                      <v-data-table-virtual fixed-header :headers="headers" :items="currentUser.userTransactions" height="250"
                        item-value="name">
                      </v-data-table-virtual>

                      <v-card-actions class="justify-center">
                        <v-btn @click="isActive.value = false" text="Fermer"></v-btn>
                      </v-card-actions>
                    </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 MyUserModel from "@/models/myUserModel.js";
import { useClient } from "@/plugins/api.js";
import { onBeforeMount, ref } from 'vue';
const client = useClient();

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

const headers = ref([
  { title: 'Montant', value: 'amount', width: '20%', key: "amount" },
  { title: 'Date', value: 'created', width: '20%', key: "created" },
  { title: 'Message', value: 'tipMessage', width: '60%' }
]);

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>