<script setup lang="ts">
import { Modal } from '@/components';
import { MarketType } from '@/market';
import { ref } from 'vue';
import { useTrackedItemStore } from './track';


const trackedItemStore = useTrackedItemStore();

const modalOpen = ref<boolean>(false);
const type = ref<MarketType>();
const count = ref(1);

const open = (t: MarketType) => {
    type.value = t;
    count.value = 1;
    modalOpen.value = true;
}
const remove = () => { 
    const id = type.value?.id;

    if (!id) {
        modalOpen.value = false;
        return;
    }

    trackedItemStore.removeTrackedItem(id, count.value);
    modalOpen.value = false;
}

defineExpose({ open });
</script>

<template>
    <Modal v-model:open="modalOpen">
        <div class="p-4 bg-slate-800 rounded flex">
            <div class="flex me-2 mb-auto">
                <span>Count: </span>
                <input class="ms-2" type="number" min="0" step="1" v-model="count" @keyup.enter="remove" />
            </div>
            <button class="mb-auto" @click="remove">Remove</button>
        </div>
    </Modal>
</template>