<template>
    <template v-if="model && model.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">Points restants</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-20 bg-transparent px-3 py-1 outline-none caret-light-50 dark:caret-dark-50" />
                </NumberFieldRoot>
            </Label>
            <Button @click="emit('next')">Suivant</Button>
        </div>
        <div class="flex flex-row flex-wrap justify-center items-center flex-1 gap-12 mx-8 my-4 px-48">
            <template v-for="ability of config.abilities">
                <div class="flex flex-col border border-light-50 dark:border-dark-50 p-4 gap-2 w-[200px] relative">
                    <div class="flex justify-between">
                        <NumberFieldRoot :min="0" class="flex w-20 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>
                        <Tooltip side="bottom" :message="`${mainStatTexts[ability.max[0]]} (0) + ${mainStatTexts[ability.max[1]]} (0) + 0`"><span class="text-lg text-end cursor-pointer">/ {{ 0 }}</span></Tooltip>
                    </div>
                    <span class="text-xl text-center font-bold">{{ ability.name }}</span>
                    <span class="absolute -bottom-px -left-px h-[3px] bg-accent-blue" :style="{ width: `200px` }"></span>
                </div>
            </template>
        </div>
    </template>
</template>

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

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

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