<script setup lang="ts">
import { iskFormater, percentFormater } from '@/formaters';
import { useStorage } from '@vueuse/core';
import { computed } from 'vue';
import { ReprocessItemValues } from './reprocess';

interface Props {
    result?: ReprocessItemValues[];
}

const props = withDefaults(defineProps<Props>(), {
    result: () => []
});

const computedResult = computed(() => props.result.map(r =>({
    ...r,
    buy_ratio: (r.buy_reprocess / r.buy) - 1,
    sell_ratio: (r.sell_reprocess / r.sell) - 1
})))

const threshold = useStorage('reprocess-threshold', 90);
</script>

<template>
    <div class="grid mb-2 mt-4">
        <div class="justify-self-end">
            <span>Threshold: </span>
            <input type="number" min="-100" max="1000" step="1" v-model="threshold" />
        </div>
    </div>
    <table>
        <thead>
            <tr>
                <th>Item</th>
                <th>Buy</th>
                <th>Buy reprocess</th>
                <th>Sell</th>
                <th>Sell reprocess</th>
            </tr>
        </thead>
        <tbody>
            <tr v-for="r in computedResult" :key="r.typeID" :class="{'bg-emerald-500': r.buy_ratio * threshold >= 100 }">
                <td>{{ r.typeID }}</td>
                <td class="text-right">{{ iskFormater.format(r.buy) }}</td>
                <td class="text-right">{{ iskFormater.format(r.buy_reprocess) }} ({{percentFormater.format(r.buy_ratio)}})</td>
                <td class="text-right">{{ iskFormater.format(r.sell) }}</td>
                <td class="text-right">{{ iskFormater.format(r.sell_reprocess) }} ({{percentFormater.format(r.sell_ratio)}})</td>
            </tr>
        </tbody>
    </table>
</template>@/formaters