<script setup>
import {ref} from 'vue'
import LoadingModal from "../../../../Views/Components/LoadingModal.vue";
import {toast} from "vue3-toastify";

const props = defineProps({
    data: {
        type: [Array, Object],
        default: () => ({})
    },
    deep_jump_id: {
        type: Number,
        default: 0
    },
    deep_jump_id_sub: {
        type: Number,
        default: 0
    }
})

const showLoading = ref(false)

async function exportSepaFile() {
    showLoading.value = true;

    try {
        const response = await fetch('/api/v1/cost-unit/export-sepa-file', {
            headers: {"Content-Type": "application/json"},
        });

        if (!response.ok) {
            if (response.status === 404) {
                const data = await response.json();
                toast.info(data.message);
            } else {
                throw new Error('Fehler beim Erzeugen der SEPA-Datei');
            }
            showLoading.value = false;
            return;
        }

        const blob = await response.blob();
        const downloadUrl = window.URL.createObjectURL(blob);
        const a = document.createElement("a");
        a.style.display = "none";
        a.href = downloadUrl;
        a.download = "sepa-pain-" + new Date().toISOString().slice(0, 10) + ".xml";

        document.body.appendChild(a);
        a.click();

        setTimeout(() => {
            window.URL.revokeObjectURL(downloadUrl);
            document.body.removeChild(a);
        }, 100);

        toast.success('SEPA-Datei wurde erfolgreich erzeugt.');
        showLoading.value = false;

    } catch (err) {
        showLoading.value = false;
        toast.error('Beim Erzeugen der SEPA-Datei ist ein Fehler aufgetreten.');
    }
}
</script>

<template>
    <div>
        <h2>Globale Aktionen</h2>

        <div style="margin: 20px 0;">
            <p v-if="props.data.pending_count > 0">
                Es gibt <strong>{{ props.data.pending_count }}</strong> ausstehende SEPA-Überweisungen
                (Gesamtbetrag: <strong>{{ props.data.pending_amount }} Euro</strong>).
            </p>
            <p v-else>
                Keine ausstehenden SEPA-Überweisungen vorhanden.
            </p>
        </div>

        <button
            class="action-button"
            :disabled="!props.data.pending_count || props.data.pending_count === 0"
            @click="exportSepaFile"
        >
            Erzeuge SEPA-File
        </button>

        <loading-modal v-if="showLoading" />
    </div>
</template>

<style scoped>
.action-button {
    padding: 10px 20px;
    background-color: #0073aa;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 1rem;
}

.action-button:hover:not(:disabled) {
    background-color: #005a87;
}

.action-button:disabled {
    background-color: #ccc;
    cursor: not-allowed;
}
</style>
