<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 w-full" 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 overflow-auto">
        </TabsContent>
        <TabsContent value="training">
            <TrainingViewer :config="config" />
        </TabsContent>
        <TabsContent value="abilities" class="flex-1 overflow-auto">

        </TabsContent>
        <TabsContent value="spells" class="flex-1 overflow-auto">

        </TabsContent>
    </TabsRoot>
    <!-- <Collapsible class="border-b border-light-30 dark:border-dark-30 p-1">
        <template #label>
            <span class="font-bold text-xl">Sorts</span>
        </template>
        <template #default>
            <div class="flex flex-col gap-2 max-h-[50vh] px-4 relative overflow-y-auto">
                <div class="sticky top-0 py-2 bg-light-0 dark:bg-dark-0 z-10 flex gap-2 items-center">
                    <span class="text-xl pe-4" :class="{ 'text-light-red dark:text-dark-red': spellsPoints < (data.spells?.length ?? 0) }">Sorts: {{ data.spells?.length ?? 0 }}/{{ spellsPoints }}</span>
                    <TextInput label="Nom" v-model="spellFilter.text" />
                    <Combobox label="Rang" v-model="spellFilter.ranks" multiple :options="[['Rang 1', 1], ['Rang 2', 2], ['Rang 3', 3]]" />
                    <Combobox label="Type" v-model="spellFilter.types" multiple :options="[['Précision', 'precision'], ['Savoir', 'knowledge'], ['Instinct', 'instinct']]" />
                    <Combobox label="Element" v-model="spellFilter.elements" multiple :options="[['Feu', 'fire'], ['Glace', 'ice'], ['Foudre', 'thunder'], ['Terre', 'earth'], ['Arcane', 'arcana'], ['Air', 'air'], ['Nature', 'nature'], ['Lumière', 'light'], ['Psy', 'psyche']]" />
                </div>
                <div class="grid gap-4 grid-cols-2">
                    <div class="py-1 px-2 border border-light-30 dark:border-dark-30 flex flex-col hover:border-light-50 dark:hover:border-dark-50 cursor-pointer" v-for="spell of filterSpells(characterConfig.spells)" :class="{ '!border-accent-blue bg-accent-blue bg-opacity-20': data.spells?.find(e => e === spell.id) }"
                        @click="() => data.spells?.includes(spell.id) ? data.spells.splice(data.spells.findIndex((e: string) => e === spell.id), 1) : data.spells!.push(spell.id)">
                        <div class="flex flex-row justify-between">
                            <span class="text-lg font-bold">{{ spell.name }}</span>
                            <div class="flex flex-row items-center gap-6">
                                <div class="flex flex-row text-sm gap-2">
                                    <span v-for="element of spell.elements" :class="elementTexts[element].class" class="border !border-opacity-50 rounded-full !bg-opacity-20 px-2 py-px">{{ elementTexts[element].text }}</span>
                                </div>
                                <div class="flex flex-row text-sm gap-1">
                                    <span class="">Rang {{ spell.rank }}</span><span>/</span>
                                    <span class="">{{ spellTypeTexts[spell.type] }}</span><span>/</span>
                                    <span class="">{{ spell.cost }} mana</span><span>/</span>
                                    <span class="">{{ typeof spell.speed === 'string' ? spell.speed : `${spell.speed} minutes` }}</span>
                                </div>
                            </div>
                        </div>
                        <MarkdownRenderer :content="spell.effect" />
                    </div>
                </div>
            </div>
        </template>
    </Collapsible> -->
</template>