<script setup>
import { ref } from 'vue';
import { useI18n } from 'vue-i18n';

import axios from 'axios';
import { useDialogPluginComponent } from 'quasar';

const { t } = useI18n();
const { dialogRef } = useDialogPluginComponent();

const closeButton = ref(null);

const $props = defineProps({
    id: {
        type: Number,
        required: true,
    },
    promise: {
        type: Function,
        required: true,
    },
});

const isLoading = ref(false);

const saveData = async () => {
    const timestamp = new Date().getTime();
    const payload = {
        finished: timestamp,
    };
    await axios.patch(`CreditClassifications/${$props.id}`, payload);
    $props.promise();
    closeButton.value.click();
};
</script>

<template>
    <QDialog ref="dialogRef">
        <QCard class="q-pa-sm">
            <span
                ref="closeButton"
                class="flex justify-end cursor-pointer q-mb-sm"
                v-close-popup
            >
                <QIcon name="close" size="sm" />
            </span>

            <QCardSection>
                <div class="text-h6 q-mb-sm">
                    {{ t('Are you sure you want to close this contract?') }}
                </div>
                <div class="q-mb-sm">{{ t('Close contract') }}</div>
            </QCardSection>

            <QCardActions align="right">
                <QBtn :label="t('globals.cancel')" color="primary" flat v-close-popup />
                <QBtn
                    :label="t('globals.confirm')"
                    color="primary"
                    :loading="isLoading"
                    @click="saveData"
                    unelevated
                />
            </QCardActions>
        </QCard>
    </QDialog>
</template>

<i18n>
es:
    Are you sure you want to close this contract?: ¿Seguro que quieres cerrar este contrato?
    Close contract: Cerrar contrato
</i18n>
