<script setup lang="ts">
import characterConfig from '#shared/character-config.json';
import { Icon } from '@iconify/vue/dist/iconify.js';
import PreviewA from '~/components/prose/PreviewA.vue';
import { mainStatTexts, MAIN_STATS, type CharacterConfig } from '~/types/character';

//@ts-ignore
const config = ref<CharacterConfig>(characterConfig);
const trainingTab = ref(0);

function copy()
{
    navigator.clipboard.writeText(JSON.stringify(config.value));
}
</script>

<template>
    <Head>
        <Title>d[any] - Edition de données</Title>
    </Head>
    <TabsRoot class="flex flex-1 flex-col justify-start items-center gap-4 px-8 max-w-full overflow-hidden" default-value="training">
        <TabsList class="flex flex-row gap-4 self-center relative px-4">
            <TabsIndicator class="absolute left-0 h-[3px] bottom-0 w-[--radix-tabs-indicator-size] translate-x-[--radix-tabs-indicator-position] transition-[width,transform] duration-300 bg-accent-blue"></TabsIndicator>
            <TabsTrigger value="peoples" class="px-2 py-1 border-b border-transparent hover:border-accent-blue">Peuples</TabsTrigger>
            <TabsTrigger value="training" class="px-2 py-1 border-b border-transparent hover:border-accent-blue">Entrainement</TabsTrigger>
            <TabsTrigger value="abilities" class="px-2 py-1 border-b border-transparent hover:border-accent-blue">Compétences</TabsTrigger>
            <TabsTrigger value="spells" class="px-2 py-1 border-b border-transparent hover:border-accent-blue">Sorts</TabsTrigger>
            <Tooltip message="Copier le JSON" side="right"><Button icon @click="copy" class="p-2"><Icon icon="radix-icons:clipboard-copy" /></Button></Tooltip>
        </TabsList>
        <TabsContent value="peoples" class="flex-1 outline-none">
        </TabsContent>
        <TabsContent value="training" class="flex-1 outline-none max-w-full">
            <TrainingViewer :config="config" progress>
                <template #default="{ stat, level, option }">
                    <div class="border border-light-40 dark:border-dark-40 cursor-pointer px-2 py-1 w-96">
                        <MarkdownRenderer :proses="{ 'a': PreviewA }" :content="option.description.map(e => e.text).join('\n')" />
                    </div>
                </template>
            </TrainingViewer>
        </TabsContent>
        <TabsContent value="abilities" class="flex-1 outline-none">

        </TabsContent>
        <TabsContent value="spells" class="flex-1 outline-none">

        </TabsContent>
    </TabsRoot>
</template>