<template>
    <div class="row parentContainer">
        <div class="col-3 m-r-5 m-b-10 b-a b-grey p-t-20 p-b-20"  v-for="item in listData" v-bind:key="item.id" >
            <currency-component :section="section" :data="item"></currency-component>
        </div>
        <div class="col-3 b-a b-grey b-dashed pointer requestModal m-b-10" data-type="addCurrency" style="min-height: 127px;">
            <div class="row h-100 align-items-center text-center">
                <div class="col">
                    <div class="m-b-10 hint-text">
                        <i class="fa fa-plus fs-30 muted hint-text"></i>
                    </div>
                    <div class="font-heading fs-10 all-caps muted">Add Currency</div>
                </div>
            </div>
            <modal-component class="animate__animated animate__fast animate__fadeIn" styleType="fill-in" type="addCurrency">
                <add-currency-form-component :section="section"></add-currency-form-component>
            </modal-component>
        </div>
    </div>
</template>

<script setup lang="ts">
import { computed, onMounted, watch } from 'vue';
import { useQueueStore } from '@/stores/queue';
import { useRequest } from '@/composables/useRequest';
import route from '@/general/functions/router';

const section = 'convertibleCurrenciesSection';
const queueStore = useQueueStore();
const { submit } = useRequest();

const listData = computed(() => queueStore.getListData(section));
const pendingList = computed(() => queueStore.isInCompleteQueue(section));

const fetchList = () => {
    submit(`${route('api.currency.list')}?filters=${JSON.stringify({ id_not: 1 })}`, 'get', section, false, false, undefined, {
        successHandler: (response) => {
            queueStore.setListComplete({ name: section, data: response.payload.data });
        }
    });
};

onMounted(() => {
    queueStore.updateListQueue({ name: section, page: 1, filters: {} });
});

watch(pendingList, (inComplete) => {
    if (inComplete) {
        fetchList();
    }
});
</script>
