<template>
    <div class="row h-100 mt-1 mb-1 m-md-0">
        <div class="col">
            <!-- <loading-component style="height: 100%; top: 0;" key="1" color="success" v-show="isLoading"></loading-component> -->

            <div class="row h-100" style="margin-left:1px; margin-right:1px; min-height: 50px;" v-if='!isLoading && selectedCurrency'>
                <div class="col bg-primary text-white">
                    <div class="row h-100 align-items-center">
                        <div class="col p-l-5 p-r-20">
                            <span class="m-l-10">{{ selectedCurrency.name }}</span>
                        </div>
                        <div class="col-auto h-100 pointer" @click="recipientMenu = !recipientMenu">
                            <div class="row align-items-center bg-primary-light h-100">
                                <div class="col ">
                                    <i class="fa fs-14 m-t-5"
                                        :class="[{ 'fa-angle-down': !recipientMenu }, { 'fa-angle-up': recipientMenu }]"></i>
                                </div>
                            </div>
                        </div>
                        <div class="relative w-100 text-master">
                            <div class="absolute w-100 b-l b-b b-r b-success" :class="[{ 'hide': !recipientMenu }]"
                                style="top: 100%; right: 0; z-index: 1;">
                                <div class="row text-left no-margin bg-white">
                                    <div class="col no-padding">
                                        <div class="row no-margin" v-for="currency in currencyList"
                                            v-bind:key="currency.id">
                                            <div class="col b-b b-grey p-t-10 p-b-10 pointer hover-t-10 p-b-10 "
                                                :class="[{ 'bg-primary-light': selectedCurrency.id === currency.id }, { 'text-white': selectedCurrency.id === currency.id }, { 'hover-primary': selectedCurrency.id !== currency.id }, { 'pointer': selectedCurrency.id !== currency.id }]"
                                                @click="UpdateCurrency(currency)">
                                                <div class="row align-items-center justify-content-center">
                                                    <div class="col">
                                                        <div class="row align-items-center justify-content-center">
                                                            <div class="col-auto p-l-5">
                                                                <div class="font-heading fs-12">
                                                                    {{ currency.name }}
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

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

const props = defineProps<{
    service_id?: number | null;
}>();

const emit = defineEmits(['loaded', 'update:service_id']);

const queueStore = useQueueStore();
const { submit } = useRequest();

const section = 'chooseCurrencySection';
const currencyList = ref<any[] | null>(null);
const recipientMenu = ref(false);
const selectedCurrency = ref<any>(null);
const isLoading = ref(true);

const pendingQueue = computed(() => {
    return queueStore.isInCompleteQueue(section);
});

const UpdateCurrency = (currency: any) => {
    selectedCurrency.value = currency;
    recipientMenu.value = false;
    emit('update:service_id', currency.id);
};

const fetchCurrency = () => {
    submit(route('api.service_type.list'), 'get', section, false, false, null, {
        successHandler: (response: any) => {
            isLoading.value = false;
            currencyList.value = response.payload.data;
            if (currencyList.value && currencyList.value.length > 0) {
                UpdateCurrency(currencyList.value[0]);
            }
            emit('loaded', true);
            queueStore.setListComplete({ name: section, data: response.payload.data });
        }
    });
};

watch(pendingQueue, (inComplete) => {
    if (inComplete) {
        fetchCurrency();
    }
});

onMounted(() => {
    queueStore.updateListQueue({ name: section });
});
</script>
