<script setup lang="ts">
import { formatIsk, percentFormater } from '@/formaters';
import { SortableHeader, useSort } from '@/table';
import { copyToClipboard } from '@/utils';
import { ArrowPathIcon } from '@heroicons/vue/24/outline';
import { useStorage } from '@vueuse/core';
import { computed, ref } from 'vue';
import { MarketResult, getHistoryQuartils } from ".";
import { MarketType, MarketTypeLabel } from "./type";

interface Props {
    items?: MarketResult[];
}

interface Emits {
    (e: 'relaod', type: MarketType): void;
    (e: 'relaodAll'): void;
}

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

const days = useStorage('market-days', 365);
const filter = ref("");
const { sortedArray, headerProps } = useSort(computed(() => props.items
    .filter(r => r.type.name.toLowerCase().includes(filter.value.toLowerCase()))
    .map(r => {
        const quartils = getHistoryQuartils(r.history, days.value);

        return {
            type: r.type,
            typeID: r.type.id,
            name: r.type.name,
            buy: r.buy,
            sell: r.sell,
            q1: quartils.q1,
            mmedian: quartils.median,
            q3: quartils.q3,
            percent: quartils.q3 / quartils.q1
        };
    })), {
        defaultSortKey: 'name',
        defaultSortDirection: 'asc'
    })
</script>

<template>
    <div class="flex">
        <div class="flex justify-self-end mb-2 mt-4 ms-auto">
        <div class="end">
            <span>Days: </span>
            <input type="number" min="1" max="365" step="1" v-model="days" />
        </div>
        <div class="end">
            <span>Filter: </span>
            <input type="text" class="w-96" v-model="filter" >
        </div>
        <div class="end">
            <button class="flex" @click="$emit('relaodAll')"><ArrowPathIcon class="h-6 w-6 me-2" />Reload all</button>
        </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="q1">Q1</SortableHeader>
                <SortableHeader v-bind="headerProps" sortKey="median">Median</SortableHeader>
                <SortableHeader v-bind="headerProps" sortKey="q3">Q3</SortableHeader>
                <SortableHeader v-bind="headerProps" sortKey="percent">Percent</SortableHeader>
                <th></th>
            </tr>
        </thead>
        <tbody>
            <tr v-for="r in sortedArray" :key="r.typeID" class="cursor-pointer"  :class="{'bg-emerald-500': r.buy <= r.q1 }" @click="copyToClipboard(r.name)">
                <td>
                    <MarketTypeLabel :id="r.typeID" :name="r.name" />
                </td>
                <td class="text-right">{{ formatIsk(r.buy) }}</td>
                <td class="text-right">{{ formatIsk(r.sell) }}</td>
                <td class="text-right">{{ formatIsk(r.q1) }}</td>
                <td class="text-right">{{ formatIsk(r.mmedian) }}</td>
                <td class="text-right">{{ formatIsk(r.q3) }}</td>
                <td class="text-right">{{  percentFormater.format(r.percent) }}</td>
                <td class="text-right">
                    <button class="btn-icon" @click="$emit('relaod', r.type)"><ArrowPathIcon class="hover:stroke-slate-400"/></button>
                </td>
            </tr>
        </tbody>
    </table>
</template>

<style scoped>
div.end {
    @apply justify-self-end ms-2;
}
</style>