<template>
    <VModal :model-value="modelValue" :title="$t('listDetailPage.modals.settleShare.title')"
        @update:modelValue="$emit('update:modelValue', false)" size="md">
        <template #default>
            <div v-if="isLoading" class="text-center">
                <VSpinner :label="$t('listDetailPage.loading.settlement')" />
            </div>
            <div v-else>
                <p>
                    {{ $t('listDetailPage.modals.settleShare.settleAmountFor', { userName: userName }) }}
                </p>
                <VFormField :label="$t('listDetailPage.modals.settleShare.amountLabel')"
                    :error-message="error || undefined">
                    <VInput type="number" :model-value="amount" @update:modelValue="$emit('update:amount', $event)"
                        required />
                </VFormField>
            </div>
        </template>
        <template #footer>
            <VButton variant="neutral" @click="$emit('update:modelValue', false)">
                {{ $t('listDetailPage.modals.settleShare.cancelButton') }}
            </VButton>
            <VButton variant="primary" @click="$emit('confirm')" :disabled="isLoading">
                {{ $t('listDetailPage.modals.settleShare.confirmButton') }}
            </VButton>
        </template>
    </VModal>
</template>

<script setup lang="ts">
import { computed, defineProps, defineEmits } from 'vue';
import type { PropType } from 'vue';
import { useI18n } from 'vue-i18n';
import type { ExpenseSplit } from '@/types/expense';
import VModal from '@/components/valerie/VModal.vue';
import VSpinner from '@/components/valerie/VSpinner.vue';
import VFormField from '@/components/valerie/VFormField.vue';
import VInput from '@/components/valerie/VInput.vue';
import VButton from '@/components/valerie/VButton.vue';

const props = defineProps({
    modelValue: {
        type: Boolean,
        required: true,
    },
    split: {
        type: Object as PropType<ExpenseSplit | null>,
        required: true,
    },
    amount: {
        type: String,
        required: true,
    },
    error: {
        type: String as PropType<string | null>,
        default: null,
    },
    isLoading: {
        type: Boolean,
        default: false,
    }
});

defineEmits(['update:modelValue', 'update:amount', 'confirm']);

const { t } = useI18n();

const userName = computed(() => {
    if (!props.split) return '';
    return props.split.user?.name || props.split.user?.email || `User ID: ${props.split.user_id}`;
});

</script>