<script setup lang="ts">
import { Icon } from '@iconify/vue/dist/iconify.js';

definePageMeta({
    guestsGoesTo: '/user/login',
})
const { add } = useToast();
const { user } = useUserSession();

const { data: characters, error, status } = await useFetch(`/api/character`);

async function deleteCharacter(id: number)
{
    status.value = "pending";
    await useRequestFetch()(`/api/character/${id}`, { method: 'delete' });
    status.value = "success";
    add({ content: 'Personnage supprimé', type: 'info', duration: 25000, timer: true, });
    characters.value = characters.value?.filter(e => e.id !== id);
}
async function duplicateCharacter(id: number)
{
    status.value = "pending";
    const newId = await useRequestFetch()(`/api/character/${id}/duplicate`, { method: 'post' });
    status.value = "success";
    add({ content: 'Personnage dupliqué', type: 'info', duration: 25000, timer: true, });
    useRouter().push({ name: 'character-id', params: { id: newId } });
}
</script>

<template>
    <Head>
        <Title>d[any] - Mes personnages</Title>
    </Head>
    <div class="flex flex-col">
        <div class="flex align-center justify-center">
            <NuxtLink v-if="user?.state === 1" :to="{ name: 'character-id-edit', params: { id: 'new' } }"><Button>Nouveau personnage</Button></NuxtLink>
            <Tooltip v-else side="top" message="Veuillez valider votre email avant de pouvoir créer un personnage."><Button disabled>Nouveau personnage</Button></Tooltip>
        </div>
        <div v-if="status === 'pending'" class="flex flex-1 justify-center align-center">
            <Loading size="large" />
        </div>
        <div v-else-if="status === 'success'" class="grid p-6 2xl:grid-cols-3 lg:grid-cols-2 grid-cols-1 gap-4 w-full">
            <div class="border border-light-30 dark:border-dark-30 p-3 flex flex-row gap-4" v-for="character of characters">
                <Avatar size="large" icon="radix-icons:person" src="" />
                <div class="flex flex-1 flex-shrink flex-col truncate">
                    <NuxtLink class="text-xl font-bold hover:text-accent-blue truncate" :to="{ name: 'character-id', params: { id: character.id } }" :title="character.name">{{ character.name }}</NuxtLink>
                    <span class="text-sm truncate">Niveau {{ character.level }}</span>
                </div>
                <AlertDialogRoot>
                    <DropdownMenuRoot>
                        <DropdownMenuTrigger class="self-start">
                            <Button icon><Icon icon="radix-icons:dots-vertical" /></Button>
                        </DropdownMenuTrigger>

                        <DropdownMenuPortal>
                            <DropdownMenuContent align="end" side="bottom" class="z-50 outline-none bg-light-20 dark:bg-dark-20 will-change-[opacity,transform] data-[side=top]:animate-slideDownAndFade data-[side=right]:animate-slideLeftAndFade data-[side=bottom]:animate-slideUpAndFade data-[side=left]:animate-slideRightAndFade border border-light-35 dark:border-dark-35">
                                <DropdownMenuItem @select="useRouter().push({ name: 'character-id-edit', params: { id: character.id } })" class="cursor-pointer text-base text-light-100 dark:text-dark-100 leading-none flex items-baseline py-1.5 relative ps-7 pe-4 select-none outline-none data-[disabled]:text-light-60 dark:data-[disabled]:text-dark-60 data-[disabled]:pointer-events-none data-[highlighted]:bg-light-35 dark:data-[highlighted]:bg-dark-35">
                                    <Icon icon="radix-icons:pencil-1" class="absolute left-1.5" />
                                    <span>Editer</span>
                                </DropdownMenuItem>
                                <DropdownMenuItem @select="duplicateCharacter(character.id)" class="cursor-pointer text-base text-light-100 dark:text-dark-100 leading-none flex items-center py-1.5 relative ps-7 pe-4 select-none outline-none data-[disabled]:text-light-60 dark:data-[disabled]:text-dark-60 data-[disabled]:pointer-events-none data-[highlighted]:bg-light-35 dark:data-[highlighted]:bg-dark-35">
                                    <Icon icon="radix-icons:clipboard-copy" class="absolute left-1.5" />
                                    <span>Dupliquer</span>
                                </DropdownMenuItem>
                                <AlertDialogTrigger>
                                    <DropdownMenuItem class="cursor-pointer text-base text-light-red dark:text-dark-red leading-none flex items-center py-1.5 relative ps-7 pe-4 select-none outline-none data-[disabled]:text-light-60 dark:data-[disabled]:text-dark-60 data-[disabled]:pointer-events-none data-[highlighted]:bg-light-red dark:data-[highlighted]:bg-dark-red data-[highlighted]:bg-opacity-30 dark:data-[highlighted]:bg-opacity-30">
                                        <Icon icon="radix-icons:trash" class="absolute left-1.5" />
                                        <span>Supprimer</span>
                                    </DropdownMenuItem>
                                </AlertDialogTrigger>

                                <DropdownMenuArrow class="fill-light-35 dark:fill-dark-35" />
                            </DropdownMenuContent>
                        </DropdownMenuPortal>
                    </DropdownMenuRoot>
                    <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">Supprimer {{ character.name }} ?</AlertDialogTitle>
                            <div class="flex flex-1 justify-end gap-4">
                                <AlertDialogCancel asChild><Button>Non</Button></AlertDialogCancel>
                                <AlertDialogAction asChild><Button @click="() => deleteCharacter(character.id)" 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">Oui</Button></AlertDialogAction>
                            </div>
                        </AlertDialogContent>
                    </AlertDialogPortal>
                </AlertDialogRoot>
            </div>
        </div>
        <div v-else>
            <span>Erreur de chargement</span>
            <span>{{ error?.message }}</span>
        </div>
    </div>
</template>