<script setup>
import { ref, onMounted } from 'vue';


let isConnected = ref(false);
let firstname = ref('');

function checkConnection() {
    const req = fetch('http://localhost:3000/user', { credentials: 'include' }).then(response => {
        if (response.ok) {
            isConnected.value = true;
            return response.json();
        } else {
            isConnected.value = false;
            return null;
        }
    }).then(data => {
        if (data) {
            firstname.value = data.firstname;
        }

    }).catch(erreur => {
        console.error('Erreur lors de l\'appel API :', erreur);
        isConnected.value = false;
    });

}

function logout() {

    const req = fetch('http://localhost:3000/user/logout', { credentials: 'include' }).then(response => {
        if (response.ok) {
            isConnected.value = false;
        }
    }).catch(erreur => {
        console.error('Erreur lors de l\'appel API :', erreur);
    });

}

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


</script>

<template>
    <header>

        <nav>
            <ul>
                <li class = "gauche"> <router-link to="/">
                        Projet S5
                    </router-link></li>
                <li class = "droite"><router-link v-if="!isConnected" to="/inscription">Inscription</router-link></li>
                <li class = "droite"><router-link v-if="!isConnected" to="/connexion">Connexion</router-link></li>
                <li class = "droite"><router-link v-if="isConnected" to="/account">Mon compte : {{ firstname }} </router-link></li>
                <li class = "droite"><a v-if="isConnected" @click="logout">Déconnexion</a></li>
            </ul>


        </nav>
    </header>
</template>

<style scoped>
header {
    padding: 0;
    margin: auto;
}

ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #333;
}

li.gauche {
    float: left;
}
li.droite {
    float: right;
}
li.gauche a {
    font-weight: bold;
}

li a {
    display: block;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
}

/* Change the link color to #111 (black) on hover */
li a:hover {
    background-color: #111;
}
button {
    display: block;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
}
</style>