<script setup lang="ts">
import { Modal } from '@/components';
import { MarketType, MarketTypeLabel } from '@/market';
import { Ledger, LedgerSelect, isMain, useLedgersStore } from '@/ledger';
import { computed, ref } from 'vue';
import { AcquiredType, acquiredTypesToSorted, fromEveDatetimeInput, toEveDatetimeInput } from './AcquiredType';
import { useAcquiredTypesStore } from './acquisition';


const acquiredTypesStore = useAcquiredTypesStore();
const ledgersStore = useLedgersStore();

const mainLedgers = computed(() => ledgersStore.ledgers.filter(isMain));

const modalOpen = ref<boolean>(false);
const type = ref<MarketType>();
const count = ref(1);
const date = ref('');
const types = ref<AcquiredType[]>([]);
const contextLedgerId = ref<string>();
const ledger = ref<Ledger>();

const ledgerId = computed(() => contextLedgerId.value ?? ledger.value?.ledgerId);

const open = (t: AcquiredType[], ledgerId?: string) => {
    if (t.length === 0) {
        return;
    }

    types.value = acquiredTypesToSorted(t);
    type.value = t[0].type;
    count.value = 1;
    date.value = toEveDatetimeInput(new Date());
    contextLedgerId.value = ledgerId;
    ledger.value = undefined;
    modalOpen.value = true;
}
const remove = async () => {
    if (types.value.length === 0) {
        modalOpen.value = false;
        return;
    }

    const lid = ledgerId.value;

    if (!lid) {
        return;
    }

    const datetime = fromEveDatetimeInput(date.value);
    let remaining = count.value;

    for (const t of types.value) {
        if (remaining <= 0) {
            break;
        }

        const quantity = Math.min(remaining, t.remaining);

        await acquiredTypesStore.removeAcquiredType(t.id, quantity, lid, datetime);
        remaining -= quantity;
    }
    modalOpen.value = false;
}

defineExpose({ open });
</script>

<template>
    <Modal v-model:open="modalOpen">
        <div class="bg-slate-800 rounded">
            <MarketTypeLabel v-if="type" class="m-1" :id="type.id" :name="type.name" hideCopy />
            <hr />
            <div class="flex p-4">
                <div class="flex me-2 mb-auto">
                    <span>Count: </span>
                    <div class="ms-2">
                        <input type="number" min="0" step="1" v-model="count" @keyup.enter="remove" />
                        <div>
                            <button class="px-2 mt-2 bg-slate-600 hover:bg-slate-700 border rounded cursor-pointer" @click="count = types.reduce((acc, t) => acc + t.remaining, 0)">All</button>
                        </div>
                    </div>
                </div>
                <div class="flex me-2 mb-auto">
                    <span>Eve Time: </span>
                    <input class="ms-2" type="datetime-local" v-model="date" />
                </div>
                <div v-if="!contextLedgerId" class="flex me-2 mb-auto">
                    <span>Ledger: </span>
                    <LedgerSelect class="ms-2" v-model="ledger" :ledgers="mainLedgers" />
                </div>
                <button class="mb-auto" :disabled="!ledgerId" @click="remove">Remove</button>
            </div>
        </div>
    </Modal>
</template>