<script setup lang="ts">
import characterConfig from '#shared/character-config.json';
import { Toaster } from '#shared/components.util';
import type { CharacterConfig } from '~/types/character';

definePageMeta({
    guestsGoesTo: '/user/login',
})
const { data: characters, error, status } = await useFetch(`/api/character`);
const config = characterConfig as CharacterConfig;

async function deleteCharacter(id: number)
{
    status.value = "pending";
    await useRequestFetch()(`/api/character/${id}`, { method: 'delete' });
    status.value = "success";
    Toaster.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";
    Toaster.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 v-if="status === 'pending'" class="flex flex-1 justify-center align-center">
            <Loading size="large" />
        </div>
        <template v-else-if="status === 'success'">
            <div v-if="characters && characters.length > 0" class="grid p-6 2xl:grid-cols-3 lg:grid-cols-2 grid-cols-1 gap-4 w-full">
                <div class="flex flex-col w-[360px] border border-light-35 dark:border-dark-35" v-for="character of characters">
                    <NuxtLink :to="{ name: 'character-id', params: { id: character.id } }" class="group bg-light-10 dark:bg-dark-10 border-b border-light-35 dark:border-dark-35 p-2 flex flex-col gap-2">
                        <div class="flex flex-row gap-8 ps-4 items-center">
                            <div class="flex flex-1 flex-col gap-2 justify-center">
                                <span class="text-lg font-bold group-hover:text-accent-blue">{{ character.name }}</span>
                                <span class="border-b w-full border-light-50 dark:border-dark-50"></span>
                                <div class="flex flex-row flex-1 items-stretch gap-4">
                                    <span class="text-sm">Niveau {{ character.level }}</span>
                                    <span class="w-px h-full bg-light-50 dark:bg-dark-50"></span>
                                    <span class="text-sm italic">{{ config.peoples[character.people!]?.name }}</span>
                                </div>
                            </div>
                            <div class="rounded-full w-[96px] h-[96px] border border-light-50 dark:border-dark-50 bg-light-100 dark:bg-dark-100 !bg-opacity-10"></div>
                        </div>
                    </NuxtLink>
                    <div class="flex justify-around items-center py-2 px-4 gap-4">
                        <NuxtLink :to="{ name: 'character-id-edit', params: { id: character.id } }" class="text-sm font-bold cursor-pointer hover:text-accent-blue">Editer</NuxtLink>
                        <span class="w-px h-full bg-light-50 dark:bg-dark-50"></span>
                        <NuxtLink @click="duplicateCharacter(character.id)" class="text-sm font-bold cursor-pointer hover:text-accent-blue">Dupliquer</NuxtLink>
                        <span class="w-px h-full bg-light-50 dark:bg-dark-50"></span>
                        <AlertDialogRoot>
                            <AlertDialogTrigger>
                                <span class="text-sm font-bold text-light-red dark:text-dark-red">Supprimer</span>
                            </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">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>
            <div v-else class="flex flex-col gap-2 items-center flex-1">
                <span class="text-lg font-bold">Vous n'avez pas encore de personnage</span>
                <NuxtLink class="inline-flex justify-center items-center outline-none leading-none transition-[box-shadow]
                    text-light-100 dark:text-dark-100 bg-light-20 dark:bg-dark-20 border border-light-40 dark:border-dark-40
                    hover:bg-light-25 dark:hover:bg-dark-25 hover:border-light-50 dark:hover:border-dark-50
                    focus:bg-light-30 dark:focus:bg-dark-30 focus:border-light-50 dark:focus:border-dark-50 focus:shadow-raw focus:shadow-light-50 dark:focus:shadow-dark-50 py-2 px-4" :to="{ name: 'character-id-edit', params: { id: 'new' } }">Nouveau personnage</NuxtLink>
                <NuxtLink class="inline-flex justify-center items-center outline-none leading-none transition-[box-shadow]
                    text-light-100 dark:text-dark-100 bg-light-20 dark:bg-dark-20 border border-light-40 dark:border-dark-40
                    hover:bg-light-25 dark:hover:bg-dark-25 hover:border-light-50 dark:hover:border-dark-50
                    focus:bg-light-30 dark:focus:bg-dark-30 focus:border-light-50 dark:focus:border-dark-50 focus:shadow-raw focus:shadow-light-50 dark:focus:shadow-dark-50 py-2 px-4" :to="{ name: 'character-list' }">Qu'ont fait les autres ?</NuxtLink>
            </div>
        </template>
        <div v-else>
            <span>Erreur de chargement</span>
            <span>{{ error?.message }}</span>
        </div>
    </div>
</template>