<script setup>
import { toCurrency } from 'src/filters';
import { computed, onMounted, ref } from 'vue';
import { useArrayData } from 'src/composables/useArrayData';

const $props = defineProps({
    model: {
        type: Object,
        required: true,
        description: 'object to use foreignField and localField',
    },
    currencyCode: {
        type: String,
        default: undefined,
    },
    foreignField: {
        type: String,
        default: 'foreignPrice',
    },
    localField: {
        type: String,
        default: 'price',
    },
    arrayDataModel: {
        type: String,
        default: undefined,
        description: 'find currency code in array data model',
    },
});
const arrayData = $props.arrayDataModel && useArrayData($props.arrayDataModel);
const foreignValue = computed(() => $props.model?.[$props.foreignField]);
const localValue = computed(() => $props.model?.[$props.localField]);
const currency = computed(
    () => $props.currencyCode ?? arrayData.store.data?.currency?.code
);
const toCurrencyLabel = computed(() =>
    toCurrency(foreignValue.value ?? localValue.value, currency.value)
);
const currencyCodeModel = ref();

// onMounted(() => {
//     if ($props.arrayDataModel) {
//         currencyCodeModel.value = arrayData.store.data?.currency?.code;
//     }
// });
</script>

<template>
    <span :title="toCurrencyLabel" v-if="currency && localValue">
        <span v-if="foreignValue">{{ toCurrencyLabel }} /</span>
        {{ toCurrency(localValue) }}
    </span>
    <span v-else>-</span>
</template>
