<script setup lang="ts">
import { SortableHeader, useSort } from '@/components/table';
import { formatIsk, percentFormater } from '@/formaters';
import { MarketType, MarketTypeLabel, TaxInput, useMarketTaxStore } from "@/market";
import { MinusIcon, PlusIcon } from '@heroicons/vue/24/outline';
import { useStorage } from '@vueuse/core';
import { computed, ref } from 'vue';
import { AcquiredType } from './AcquiredType';
import AcquisitionQuantilsTooltip from './AcquisitionQuantilsTooltip.vue';

type Result = {
    type: MarketType;
    typeID: number;
    name: string;
    buy: number;
    sell: number;
    price: number;
    count: number;
    precentProfit: number;
    iskProfit: number;
}

interface Props {
    items?: AcquiredType[];
}

interface Emits {
    (e: 'buy', type: MarketType, price: number, buy: number, sell: number): void;
    (e: 'sell', type: MarketType): void;
}

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

const marketTaxStore = useMarketTaxStore();

const threshold = useStorage('market-acquisition-threshold', 10);
const filter = ref("");
const { sortedArray, headerProps } = useSort<Result>(computed(() => props.items
    .filter(r => r.type.name.toLowerCase().includes(filter.value.toLowerCase()))
    .map(r => {
        const precentProfit = marketTaxStore.calculateProfit(r.price, r.sell);

        return {
            type: r.type,
            typeID: r.type.id,
            name: r.type.name,
            buy: r.buy,
            sell: r.sell,
            price: r.price,
            count: r.remaining,
            precentProfit,
            iskProfit: r.price * precentProfit * r.remaining
        };
    })), {
        defaultSortKey: 'precentProfit',
        defaultSortDirection: 'desc'
    })
const getLineColor = (result: Result) => {
    if (result.precentProfit >= (threshold.value / 100)) {
        return 'line-green';
    } else if (result.precentProfit < 0) {
        return 'line-red';
    }
    return '';
}
</script>

<template>
    <div class="flex">
        <div class="flex justify-self-end mb-2 mt-4 ms-auto">
            <TaxInput />
            <div class="end">
                <span>Profit Threshold: </span>
                <input type="number" min="0" max="1000" step="1" v-model="threshold" />
            </div>
            <div class="end">
                <span>Filter: </span>
                <input type="search" class="w-96" v-model="filter" >
            </div>
        </div>
    </div>
    <table>
        <thead>
            <tr>
                <SortableHeader v-bind="headerProps" sortKey="name">Item</SortableHeader>
                <SortableHeader v-bind="headerProps" sortKey="buy">Buy</SortableHeader>
                <SortableHeader v-bind="headerProps" sortKey="sell">Sell</SortableHeader>
                <SortableHeader v-bind="headerProps" sortKey="price">Bought Price</SortableHeader>
                <SortableHeader v-bind="headerProps" sortKey="count">Bought Amount</SortableHeader>
                <SortableHeader v-bind="headerProps" sortKey="precentProfit">Profit (%)</SortableHeader>
                <SortableHeader v-bind="headerProps" sortKey="iskProfit">Profit (ISK)</SortableHeader>
                <th></th>
            </tr>
        </thead>
        <tbody>
            <tr v-for="r in sortedArray" :key="r.typeID" :class="getLineColor(r)">
                <td>
                    <div class="flex">
                        <MarketTypeLabel :id="r.typeID" :name="r.name" />
                        <AcquisitionQuantilsTooltip :id="r.typeID" :buy="r.buy" :sell="r.sell" />
                    </div>
                </td>
                <td class="text-right">{{ formatIsk(r.buy) }}</td>
                <td class="text-right">{{ formatIsk(r.sell) }}</td>
                <td class="text-right">{{ formatIsk(r.price) }}</td>
                <td class="text-right">{{ r.count }}</td>
                <td class="text-right">{{ percentFormater.format(r.precentProfit) }}</td>
                <td class="text-right">{{ formatIsk(r.iskProfit) }}</td>
                <td class="text-right">
                    <button class="btn-icon me-1" @click="$emit('buy', r.type, r.price, r.buy, r.sell)"><PlusIcon /></button>
                    <button class="btn-icon me-1" @click="$emit('sell', r.type)"><MinusIcon /></button>
                </td>
            </tr>
        </tbody>
    </table>
</template>

<style scoped lang="postcss">
div.end {
    @apply justify-self-end ms-2;
}
</style>@/components/table