<script setup lang="ts">
import { useCharactersStore } from '@/characters';
import { ReprocessItemValues, ReprocessResultTable, reprocess } from '@/reprocess';
import { useStorage } from '@vueuse/core';
import { ref } from 'vue';

const charactersStore = useCharactersStore();

const characterId = useStorage<number | undefined>('reprocess-character', undefined);
const items = ref('');

const result = ref<ReprocessItemValues[]>([]);

const send = async () => result.value = await reprocess(characterId.value, items.value);
</script>

<template>
    <div class="grid mb-2 mt-4">
        <div class="justify-self-end">
            <span>Character: </span>
            <select v-model="characterId">
                <option v-for="character in charactersStore.characters" :key="character.characterId" :value="character.characterId">{{ character.name }}</option>
            </select>
        </div>
    </div>
    <div class="flex items-stretch">
        <div class="flex-1 mx-1">
            <span>Items</span>
            <textarea class="mt-1" v-model="items" placeholder="Paste an EVE inventory listing" />
        </div>
    </div>
    <div class="grid my-2">
        <button class="justify-self-end" @click="send" :disabled="!characterId || !items.trim()">Send</button>
    </div>
    <template v-if="result.length > 0">
        <hr />
        <div class="grid mt-2">
            <ReprocessResultTable :result="result" />
        </div>
    </template>
</template>