<script setup lang="ts">
import characterConfig from '#shared/character-config.json';
import { Icon } from '@iconify/vue/dist/iconify.js';
import { FeatureEditor } from '~/shared/feature.util';
import { confirm, fullblocker } from '~/shared/floating.util';
import { getID, ID_SIZE } from '~/shared/general.util';
import type { CharacterConfig, Feature } from '~/types/character';

//@ts-ignore
const config = ref<CharacterConfig>(characterConfig);
const featureEditor = new FeatureEditor();

function copy()
{
    navigator.clipboard.writeText(JSON.stringify(config.value));
}

function createFeature()
{
    const feature: Feature = { id: getID(ID_SIZE), description: '', effect: [] };

    featureEditor.edit(feature).then(feature => {
        config.value.features[feature.id] = feature;
    }).catch(() => {}).finally(() => {
        setTimeout(popup.close, 150);
        featureEditor.container.setAttribute('data-state', 'inactive');
    });

    const popup = fullblocker([featureEditor.container], {
        priority: true, closeWhenOutside: false,
    });
    featureEditor.container.setAttribute('data-state', 'active');
}
function editFeature(id: string)
{
    config.value.features[id] && featureEditor.edit(config.value.features[id]).then(feature => {
        config.value.features[id] = feature;
    }).catch(() => {}).finally(() => {
        setTimeout(popup.close, 150);
        featureEditor.container.setAttribute('data-state', 'inactive');
    });

    const popup = fullblocker([featureEditor.container], {
        priority: true, closeWhenOutside: false,
    });
    featureEditor.container.setAttribute('data-state', 'active');
}
function deleteFeature(id: string)
{
    confirm("Voulez vous vraiment supprimer cet effet ?").then(e => { 
        if(e)
        {
            const value = config.value;
            delete value.features[id];
            config.value = value;
        }
    });
}
</script>

<template>
    <Head>
        <Title>d[any] - Edition de données</Title>
    </Head>
    <TabsRoot class="flex flex-1 max-w-full flex-col gap-8 justify-start items-center px-8 w-full" default-value="features">
        <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 ({{ config.peoples.length }})</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 ({{ Object.keys(config.abilities).length }})</TabsTrigger>
            <TabsTrigger value="aspects" class="px-2 py-1 border-b border-transparent hover:border-accent-blue">Aspects ({{ config.aspects.length }})</TabsTrigger>
            <TabsTrigger value="spells" class="px-2 py-1 border-b border-transparent hover:border-accent-blue">Sorts ({{ config.spells.length }})</TabsTrigger>
            <TabsTrigger value="features" class="px-2 py-1 border-b border-transparent hover:border-accent-blue">Features ({{ Object.keys(config.features).length }})</TabsTrigger>
            <Tooltip message="Copier le JSON" side="right"><Button icon @click="copy" class="p-2"><Icon icon="radix-icons:clipboard-copy" /></Button></Tooltip>
        </TabsList>
        <div class="flex flex-row outline-none max-w-full w-full relative overflow-hidden">
            <div class="flex flex-1 outline-none max-w-full overflow-hidden">
                <TabsContent value="peoples" class="outline-none flex gap-4 flex-col overflow-hidden">
                    <div class=""></div>
                </TabsContent>
                <TabsContent value="training" class="outline-none flex gap-4 flex-col overflow-hidden">
                    <div class=""></div>
                </TabsContent>
                <TabsContent value="abilities" class="outline-none flex gap-4 flex-col overflow-hidden">
                    <div class=""></div>
                </TabsContent>
                <TabsContent value="aspects" class="outline-none flex gap-4 flex-col overflow-hidden">
                    <div class=""></div>
                </TabsContent>
                <TabsContent value="spells" class="outline-none flex gap-4 flex-col overflow-hidden">
                    <div class=""></div>
                </TabsContent>
                <TabsContent value="features" class="outline-none flex gap-4 flex-col overflow-hidden">
                    <div class="flex flex-col w-full gap-2 justify-end items-end relative">
                        <Button icon @click="createFeature"><Icon icon="radix-icons:plus" class="w-6 h-6" /></Button>
                    </div>
                    <div class="flex flex-col gap-2 overflow-x-hidden pe-2">
                        <div class="flex flex-row gap-2 w-full border-b border-light-35 dark:border-dark-35 pb-2" v-for="feature of config.features">
                            <div class="w-full flex flex-row px-4 gap-8 items-center">
                                <span class="font-mono">{{ feature.id }}</span>
                                <span class="truncate">{{ feature.description }}</span>
                            </div>
                            <div class="flex flex-row gap-2 items-center">
                                <Button icon @click="editFeature(feature.id)"><Icon icon="radix-icons:pencil-1" /></Button>
                                <Button icon @click="deleteFeature(feature.id)"><Icon icon="radix-icons:trash" /></Button>
                            </div>
                        </div>
                    </div>
                </TabsContent>
            </div>
        </div>
    </TabsRoot>
</template>