<template>
    <template v-if="model && model.character && model.character.people !== undefined">
        <div class="flex flex-1 gap-12 px-2 py-4 justify-center items-center sticky top-0 bg-light-0 dark:bg-dark-0 w-full z-10">
            <Label class="flex items-center justify-between gap-2">
                <span class="pb-1 mx-2 md:p-0">Niveau</span>
                <NumberFieldRoot :min="1" :max="20" v-model="model.character.level" @update:model-value="val => model.updateLevel(val as Level)" class="flex justify-center border border-light-35 dark:border-dark-35 bg-light-20 dark:bg-dark-20 hover:border-light-50 dark:hover:border-dark-50 has-[:focus]:shadow-raw transition-[box-shadow] has-[:focus]:shadow-light-40 dark:has-[:focus]:shadow-dark-40">
                    <NumberFieldInput class="tabular-nums w-20 bg-transparent px-3 py-1 outline-none caret-light-50 dark:caret-dark-50" />
                </NumberFieldRoot>
            </Label>
            <Label class="flex items-center justify-between gap-2">
                <span class="pb-1 mx-2 md:p-0">Attributions restantes</span>
                <NumberFieldRoot disabled :v-model="0" class="flex justify-center border border-light-25 dark:border-dark-25 bg-light-10 dark:bg-dark-10 text-light-60 dark:text-dark-60">
                    <NumberFieldInput class="tabular-nums w-14 bg-transparent px-3 py-1 outline-none" />
                </NumberFieldRoot>
            </Label>
            <Label class="flex items-center justify-between gap-2">
                <span class="pb-1 mx-2 md:p-0">Vie</span>
                <NumberFieldRoot disabled :v-model="0" class="flex justify-center border border-light-25 dark:border-dark-25 bg-light-10 dark:bg-dark-10 text-light-60 dark:text-dark-60">
                    <NumberFieldInput class="tabular-nums w-14 bg-transparent px-3 py-1 outline-none" />
                </NumberFieldRoot>
            </Label>
            <Label class="flex items-center justify-between gap-2">
                <span class="pb-1 mx-2 md:p-0">Mana</span>
                <NumberFieldRoot disabled :v-model="0" class="flex justify-center border border-light-25 dark:border-dark-25 bg-light-10 dark:bg-dark-10 text-light-60 dark:text-dark-60">
                    <NumberFieldInput class="tabular-nums w-14 bg-transparent px-3 py-1 outline-none" />
                </NumberFieldRoot>
            </Label>
            <Button @click="emit('next')">Suivant</Button>
        </div>
        <div class="flex flex-col flex-1 gap-4 mx-8 my-4">
            <template v-for="(level, index) of config.peoples[model.character.people!].options">
                <div class="w-full flex h-px"><div class="border-t border-dashed border-light-50 dark:border-dark-50 w-full" :class="{ 'opacity-30': index > model.character.level }"></div><span class="sticky top-0">{{ index }}</span></div>
                <div class="flex flex-row gap-4 justify-center" :class="{ 'opacity-30': index > model.character.level }">
                    <template v-for="(option, i) of level">
                        <div class="flex border border-light-50 dark:border-dark-50 px-4 py-2 w-[400px]" @click="model.toggleLevelOption(parseInt(index as unknown as string, 10) as Level, i)" 
                        :class="{ 'hover:border-light-70 dark:hover:border-dark-70 cursor-pointer': index <= model.character.level, '!border-accent-blue bg-accent-blue bg-opacity-20': model.character.leveling?.some(e => e[0] == index && e[1] === i) ?? false }">
                            <span class="text-wrap whitespace-pre">{{ option.description }}</span>
                        </div>
                    </template>
                </div>
            </template>
        </div>
    </template>
</template>

<script setup lang="ts">
import type { CharacterBuilder } from '~/shared/character';
import type { CharacterConfig, Level } from '~/types/character';

const { config } = defineProps<{
    config: CharacterConfig,
}>();
const model = defineModel<CharacterBuilder>({ required: true });

const emit = defineEmits(['next']);
</script>