<script setup lang="ts">
import type { CharacterConfig, MainStat, TrainingLevel } from '~/types/character';
import PreviewA from './prose/PreviewA.vue';

const { config } = defineProps<{
    config: CharacterConfig
}>();

const selection = ref<{
    stat: MainStat;
    level: TrainingLevel;
    option: number;
}>();

function focusTraining(stat: MainStat, level: TrainingLevel, option: number)
{
    const s = selection.value;
    if(s !== undefined && s.stat === stat && s.level === level && s.option === option)
    {
        selection.value = undefined;
    }
    else
    {
        selection.value = {
            stat, level, option
        };
    }
}
</script>

<template>
    <TrainingViewer :config="config" progress>
        <template #default="{ stat, level, option }">
            <div @click.capture="console.log" class="border border-light-40 dark:border-dark-40 hover:border-light-70 dark:hover:border-dark-70 cursor-pointer px-2 py-1 w-[400px]" :class="{ '!border-accent-blue': selection !== undefined && selection?.stat == stat && selection?.level == level && selection?.option == option }">
                <MarkdownRenderer :proses="{ 'a': PreviewA }" :content="config.training[stat][level][option].description.map(e => e.text).join('\n')" />
            </div>
        </template>
    </TrainingViewer>
</template>