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

const items = ref("");
const minerals = ref("");
const efficiency = useStorage('reprocess-efficiency', 0.55);

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

const send = async () => result.value = await reprocess(items.value, minerals.value, efficiency.value);

</script>

<template>
    <div class="grid mb-2 mt-4">
        <div class="justify-self-end">
            <span>Reprocess efficiency: </span>
            <input type="number" min="0" max="1" step="0.05" v-model="efficiency" />
        </div>
    </div>
    <div class="flex items-stretch">
        <ReprocessInput name="Item JSON" v-model="items" />
        <ReprocessInput name="Mineral JSON" v-model="minerals" />
    </div>
    <div class="grid my-2">
        <button class="justify-self-end" @click="send">Send</button>
    </div>
    <template v-if="result.length > 0">
        <hr />
        <div class="grid mt-2">
            <ReprocessResultTable :result="result" />
        </div>
    </template>
</template>