<template>
    <div class="row">
        <div class="col-12">
            <div class="card">
                <div class="card-body no-padding-top">
                    <div id="accordionDownloadTransactionReport">
                        <div id="heading">
                            <button class="btn btn-link w-100 text-center no-padding" data-toggle="collapse" data-target="#collapseDownloadTransactionReport" aria-expanded="true" aria-controls="collapseDownloadTransactionReport">
                                <i class="fa fa-chevron-down"></i>
                            </button>
                            <div id="collapseDownloadTransactionReport" class="collapse" aria-labelledby="heading" data-parent="#accordionDownloadTransactionReport">
                                <div class="card-body">
                                    <div class="row">
                                        <div class="col-6">
                                            <label>Start Date</label>
                                            <date-picker-limit-range-component v-model="startDate" @input="onStartDateChange" :maxDays="maxDays"></date-picker-limit-range-component>
                                        </div>
                                        <div class="col-6">
                                            <label>End Date</label>
                                            <date-picker-limit-range-component v-model="endDate" ref="endDatePicker" :maxDays="maxDays"></date-picker-limit-range-component>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <div class="d-flex justify-content-between align-items-center">
                                <div>
                                    <span>transactions.csv</span>
                                    <p class="text-muted mb-0">(default: last 1 month)</p>
                                </div>
                                <open-link-in-new-tab-component custom-class="btn btn-primary" :url="downloadUrl">
                                    <i class="fa fa-download"></i> Download
                                </open-link-in-new-tab-component>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<style scoped>
.no-padding-top {
    padding-top: 0 !important;
}
</style>

<script setup lang="ts">
import { ref, computed } from 'vue';
import route from '@/general/functions/router';
import DatePickerLimitRangeComponent from '@/components/general/forms/DatePickerLimitRangeComponent.vue';

const maxDays = ref(21);
const startDate = ref('');
const endDate = ref('');
const isValidRange = ref(false);

const endDatePicker = ref<InstanceType<typeof DatePickerLimitRangeComponent> | null>(null);

const onStartDateChange = (date: string) => {
    if (date) {
        if (endDatePicker.value) {
            const dateParts = date.split('-');
            const startDateObj = new Date(`${dateParts[2]}-${dateParts[1]}-${dateParts[0]}`);
            const adjustedEndDate = new Date(startDateObj);
            endDatePicker.value.setStartDate(adjustedEndDate);
        }
        isValidRange.value = false;
    }
};

const formatDate = (date: string) => {
    if (date) {
        const [day, month, year] = date.split('-');
        return `${day}-${month}-${year}`;
    }
    return '';
};

const validateDateRange = () => {
    if (startDate.value && endDate.value) {
        const startParts = startDate.value.split('-');
        const endParts = endDate.value.split('-');
        const start = new Date(`${startParts[2]}-${startParts[1]}-${startParts[0]}`);
        const end = new Date(`${endParts[2]}-${endParts[1]}-${endParts[0]}`);
        const difference = Math.floor((end.getTime() - start.getTime()) / (1000 * 60 * 60 * 24));

        isValidRange.value = difference >= 0 && difference <= maxDays.value;
        return isValidRange.value;
    }
    return false;
};

const generateLink = () => {
    if (validateDateRange()) {
        const formattedStartDate = formatDate(startDate.value);
        const formattedEndDate = formatDate(endDate.value);
        return `${route('transactions.v2.export')}?startDate=${formattedStartDate}&endDate=${formattedEndDate}`;
    }
    return route('transactions.v2.export');
};

const downloadUrl = computed(() => generateLink());
</script>


