<script setup lang="ts">
import { useToast } from 'vue-toast-notification';
import { useAuth } from '@/composables/useAuth';
import { User } from './models/user';
import { onMounted, ref, watch } from 'vue';
import { AuthenticationService } from './services/authentication.service';

const authenticatedUser = ref<User | undefined>(undefined)
const API_URL = import.meta.env.VITE_MBL_API_URL
const { isAuthenticated, logout } = useAuth();
const toastService = useToast();
const authenticationService = new AuthenticationService();

const fetchUser = async () => {
  if (isAuthenticated.value) {
    try {
      authenticatedUser.value = await authenticationService.findMe();
    } catch (error) {
      console.error(error);
    }
  } else {
    authenticatedUser.value = undefined; // On vide si déconnecté
  }
};

onMounted(() => {
  fetchUser();
});

watch(isAuthenticated, () => {
  fetchUser();
});

function handleLogout() {
  logout();
  toastService.info('Vous êtes maintenant déconnecté', {
    position: 'bottom-right',
    pauseOnHover: true,
    dismissible: true,
  });
}
</script>

<template>
  <nav>
    <RouterLink class="nav-logo-div nav-link" to="/">My book list</RouterLink>
    <div class="nav-links-div">
      <RouterLink class="nav-link" to="/">Accueil</RouterLink>
      <RouterLink class="nav-link" to="/">About</RouterLink>
      <RouterLink class="nav-link" to="/">Blabla</RouterLink>
    </div>
    <div class="nav-signin-div">
      <RouterLink v-if="!isAuthenticated" class="nav-link" to="/login">Se connecter</RouterLink>
      <div class="user-section" v-else>
        <div class="clickable-user-section">
          <img class="profile-picture" :src="API_URL + authenticatedUser?.profile_picture"></img>
          <span>{{ authenticatedUser?.username }}</span>
        </div>
        <a @click="handleLogout" class="nav-link logout">
          <font-awesome-icon icon="arrow-right-from-bracket" />
        </a>
      </div>
    </div>
  </nav>
  <RouterView />
</template>

<style>
@import "styles.css";

.logout {
  cursor: pointer;
}

.logout:hover {
  transition: 0.5s;
  color: red;
}

.user-section {
  display: flex;
  flex-direction: row;
  gap: 10px;
  align-items: center;
}

.clickable-user-section {
  border-radius: 6px;
  padding-bottom: 4px;
  padding-top: 4px;
  padding-right: 8px;
  padding-left: 8px;
  display: flex;
  flex-direction: row;
  gap: 10px;
  align-items: center;
  cursor: pointer;
}

.clickable-user-section:hover  {
   background-color: light-dark(white, #5e5e5e); 
}

.profile-picture {
  width: 2em;
  height: 2em;
  border-radius: 1em;
}

.nav-logo-div {
  font-size: 20px;
  font-weight: bold;
}

.nav-link {
  text-decoration: none;
  color: light-dark(#121212, #efefec);
}

.nav-link:visited {
  color: light-dark(#121212, #efefec);
}

nav {
  align-items: center;
  border-radius: 10px;
  background-color: light-dark(#efedea, #282828);
  margin-bottom: 3em;
  padding: 1em;
  display: flex;
  justify-content: space-around;
}

.nav-links-div {
  display: flex;
  gap: 10em;
}
</style>
