<script setup lang="ts">
definePageMeta({
    guestsGoesTo: '/user/login',
})
let { user, clear } = useUserSession();

async function deleteUser()
{
    await $fetch(`/api/users/${user.value?.id}`, {
        method: 'delete'
    });
    clear();
}
</script>

<template>

    <Head>
        <Title>Mon profil</Title>
    </Head>
    <div class="grid lg:grid-cols-4 grid-col-2 w-full items-start py-8 gap-6 content-start" v-if="user">
        <div class="flex flex-col gap-4 col-span-4 lg:col-span-3 border border-light-35 dark:border-dark-35 p-4">
            <div class="flex gap-4">
                <Avatar icon="radix-icons:person" :src="`/users/${user?.id}.medium.jpg`" class="w-32 h-32" />
                <div class="flex flex-col items-start">
                    <ProseH5>{{ user.username }}</ProseH5>
                    <ProseH5>{{ user.email }}</ProseH5>
                </div>
            </div>
            <div class="border-light-red dark:border-dark-red bg-light-redBack dark:bg-dark-redBack text-light-red dark:text-dark-red py-1 px-3 flex items-center justify-between flex-col md:flex-row"
                v-if="user.state === 0">
                <HoverCard>
                    <template v-slot:default>Votre adresse mail n'as pas encore été validée. </template>
                    <template v-slot:content><span>Tant que votre adresse mail n'as pas été validée, vous n'avez que
                            des droits de lecture.</span></template>
                </HoverCard>
                <Tooltip message="En cours de développement"><Button class="ms-4" disabled>Renvoyez un mail</Button></Tooltip>
            </div>
        </div>
        <div class="flex flex-col self-center flex-1 gap-4">
            <Button @click="async () => await clear()">Se deconnecter</Button>
            <Button disabled><Tooltip message="En cours de développement">Modifier mon profil</Tooltip></Button>
            <AlertDialogRoot>
                <AlertDialogTrigger asChild><Button
                        class="border-light-red dark:border-dark-red hover:border-light-red dark:hover:border-dark-red hover:bg-light-redBack dark:hover:bg-dark-redBack text-light-red dark:text-dark-red focus:shadow-light-red dark:focus:shadow-dark-red">Supprimer
                        mon compte</Button></AlertDialogTrigger>
                <AlertDialogPortal>
                    <AlertDialogOverlay class="bg-light-0 dark:bg-dark-0 opacity-70 fixed inset-0 z-40" />
                    <AlertDialogContent
                        class="data-[state=open]:animate-contentShow fixed top-[50%] left-[50%] max-h-[85vh] w-[90vw] max-w-[800px] translate-x-[-50%] translate-y-[-50%] bg-light-10 dark:bg-dark-10 border border-light-30 dark:border-dark-30 p-6 z-50 text-light-100 dark:text-dark-100">
                        <AlertDialogTitle class="text-3xl font-light relative -top-2">Suppression de compte
                        </AlertDialogTitle>
                        <AlertDialogDescription class="text-base pb-2">Supprimer votre compte va supprimer toutes vos
                            données personnelles de notre base de données, incluant vos commentaires et vos
                            contributions. <br />
                            Êtes vous sûr de vouloir supprimer votre compte ?
                        </AlertDialogDescription>
                        <div class="flex flex-1 justify-end gap-4">
                            <AlertDialogCancel asChild><Button>Annuler</Button></AlertDialogCancel>
                            <AlertDialogAction asChild><Button @click="() => deleteUser()" class="border-light-red dark:border-dark-red hover:border-light-red dark:hover:border-dark-red hover:bg-light-redBack dark:hover:bg-dark-redBack text-light-red dark:text-dark-red focus:shadow-light-red dark:focus:shadow-dark-red">Supprimer</Button></AlertDialogAction>
                        </div>
                    </AlertDialogContent>
                </AlertDialogPortal>
            </AlertDialogRoot>
            <NuxtLink v-if="hasPermissions(user.permissions, ['admin'])" :href="{ name: 'admin' }" class="flex" no-prefetch><Button class="flex-1">Administration</Button></NuxtLink>
        </div>
        <div class="flex" v-if="user.permissions">
            <ProseTable class="!m-0">
                <ProseThead>
                    <ProseTr>
                        <ProseTh>Permission</ProseTh>
                    </ProseTr>
                </ProseThead>
                <ProseTbody>
                    <ProseTr v-for="permission in user.permissions">
                        <ProseTd>{{ permission }}</ProseTd>
                    </ProseTr>
                </ProseTbody>
            </ProseTable>
        </div>
    </div>
</template>