<template>
    <div class="row no-margin">
        <div class="col">
            <div class="row m-b-10 align-items-center parentContainer">
                <div class="col p-l-0">
                    <div class="font-heading all-caps fs-10 hint-text muted">
                        Supplier Currencies
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-3 m-r-15 m-b-15 b-a pointer p-t-20 p-b-20" :class="[{ 'b-success': parameters.currencies.includes(currencyItem.id) }, { 'b-grey': !parameters.currencies.includes(currencyItem.id) }]" v-for="currencyItem in currencyList" :key="currencyItem.id" @click="toggleCurrencies(currencyItem.id)">
                    <div class="absolute" style="top: -12px; right: -27px;" v-if="parameters.currencies.includes(currencyItem.id)">
                        <div class="icon-thumbnail icon-25 bg-success text-white btn-rounded fs-10">
                            <i class="fa fs-10 fa-check"></i>
                        </div>
                    </div>
                    <currency-component :deleteable="false" section="suppliersSection" :data="currencyItem"></currency-component>
                </div>
            </div>
            <div class="row" v-show="currenciesChanged">
                <div class="col-9 no-padding">
                    <button class="btn btn-xs btn-default bg-master-lighter b-rad-none" @click="resetCurrencies">Reset Changes</button>
                    <button class="btn btn-xs btn-success b-rad-none" @click="saveChanges">Save Changes</button>
                </div>
            </div>
        </div>
    </div>
</template>

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

interface Props {
    section: string;
    data: Record<string, any>;
}

const props = defineProps<Props>();

const { item } = useComponentHandler(props);
const queueStore = useQueueStore();
const { submit } = useRequest();

const originalCurrencies = ref<number[]>([]);
const parameters = reactive({
    currencies: [] as number[]
});

const currencyList = computed(() => queueStore.getListData('convertibleCurrenciesSection'));

const convertCurrenciesToArray = (currencies: any[]) => currencies.map((value: any) => value.id);
const staticCurrencies = (currencies: number[]) => currencies.length ? currencies.join(', ').split(', ').map((value) => parseInt(value, 10)) : [];

onMounted(() => {
    parameters.currencies = convertCurrenciesToArray(item.value.currencies || []);
    originalCurrencies.value = staticCurrencies(parameters.currencies);
});

const currenciesChanged = computed(() => {
    return !(originalCurrencies.value.length === parameters.currencies.length && originalCurrencies.value.every((element, index) => element === parameters.currencies[index]));
});

const toggleCurrencies = (value: number) => {
    const index = parameters.currencies.indexOf(value);
    if (index === -1) parameters.currencies.push(value);
    else parameters.currencies.splice(index, 1);
};

const resetCurrencies = () => {
    parameters.currencies = staticCurrencies(originalCurrencies.value);
};

const saveChanges = () => {
    submit(route('api.company.supplier.currencies.update', item.value.id), 'put', props.section, true, true, parameters, {
        successHandler: () => {
            originalCurrencies.value = staticCurrencies(parameters.currencies);
            queueStore.reloadList({ name: props.section });
        }
    });
};
</script>
