<template>
    <div class="row">
        <div class="col-12">
            <div class="card">
                <div class="card-body no-padding-top">
                    <div id="accordionShowWhiteForm">
                        <div id="heading">
                            <button class="btn btn-link w-100 text-center no-padding" data-toggle="collapse" data-target="#collapseShowWhiteForm" aria-expanded="true" aria-controls="collapseShowWhiteForm">
                                <i class="fa fa-chevron-down"></i>
                            </button>
                            <div id="collapseShowWhiteForm" class="collapse" aria-labelledby="heading" data-parent="#accordionShowWhiteForm">
                                <div class="card-body">
                                    <div class="row">
                                        <div class="col-6">
                                            <label>Start Date</label>
                                            <date-picker-limit-range-component v-model="startDate" @update:modelValue="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"></date-picker-limit-range-component>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <div class="d-flex justify-content-between align-items-center">
                                <div>
                                    <span>show-white-form-transactions-in-date-range</span>
                                    <p class="text-muted mb-0">(default: last 2 weeks)</p>
                                </div>
                                <button class="btn btn-primary" @click="openLink">
                                    <i class="fa fa-link"></i> Open Link
                                </button>
                            </div>

                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

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

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

const maxDays = ref(14);
const startDate = ref('');
const endDate = ref('');
const isValidRange = ref(false);
const endDatePicker = ref<InstanceType<typeof DatePickerLimitRangeComponent> | null>(null);

const getDefaultStartDate = () => {
    const today = new Date();
    const newStartDate = new Date(today);
    newStartDate.setDate(today.getDate() - maxDays.value);
    return formatDate(newStartDate);
};

const getDefaultEndDate = () => {
    const today = new Date();
    return formatDate(today);
};

const onStartDateChange = (date: string) => {
    if (date) {
        if (endDatePicker.value) {
            const startDateObj = new Date(date.split('-').reverse().join('-'));
            const adjustedEndDate = new Date(startDateObj);
            endDatePicker.value.setStartDate(adjustedEndDate);
        }
        isValidRange.value = false;
    }
};

const formatDate = (date: Date) => {
    if (date) {
        const day = String(date.getDate()).padStart(2, '0');
        const month = String(date.getMonth() + 1).padStart(2, '0');
        const year = date.getFullYear();
        return `${day}-${month}-${year}`;
    }
    return '';
};

const validateDateRange = () => {
    if (startDate.value && endDate.value) {
        const start = new Date(startDate.value.split('-').reverse().join('-'));
        const end = new Date(endDate.value.split('-').reverse().join('-'));
        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 openLink = () => {
    if (validateDateRange()) {
        const formattedStartDate = formatDate(new Date(startDate.value.split('-').reverse().join('-')));
        const formattedEndDate = formatDate(new Date(endDate.value.split('-').reverse().join('-')));
        const url = `/show-white-form-transactions-in-date-range/${formattedStartDate}/${formattedEndDate}`;
        window.open(url, '_blank');
    }
};

onMounted(() => {
    startDate.value = getDefaultStartDate();
    endDate.value = getDefaultEndDate();
});
</script>
