<template>
    <div class="row m-b-20">
        <div class="col">
            <div class="row">
                <div class="col">
                    <div class="row m-l-0 m-r-0 bg-master-light padding-10 parentContainer">
                        <div class="col">
                            <div class="row requestModal pointer" data-type="deleteBank">
                                <div class="col">
                                    <validation-wrapper-component :validator="v$.parameters.supplierNames">
                                        <label>Supplier</label>
                                        <input type="text" class="form-control fs-12 pointer" v-model="parameters.supplierNames" disabled>
                                    </validation-wrapper-component>
                                </div>
                            </div>
                            <modal-component class="animate__animated animate__fast animate__fadeIn" styleType="fill-in" type="deleteBank">
                                <select-supplier-form-component section="supplierListSection" @select="updateList($event)"></select-supplier-form-component>
                            </modal-component>
                        </div>
                        <div class="col-12 col-md mb-2 mb-md-0">
                            <validation-wrapper-component :validator="v$.parameters.startDate">
                                <label class="all-caps">Start Date</label>
                                <date-picker-component :parameters="parameters" v-model.lazy="parameters.startDate"></date-picker-component>
                            </validation-wrapper-component>
                        </div>
                        <div class="col-12 col-md mb-2 mb-md-0">
                            <validation-wrapper-component :validator="v$.parameters.endDate">
                                <label class="all-caps">End Date</label>
                                <date-picker-component :parameters="parameters" v-model.lazy="parameters.endDate"></date-picker-component>
                            </validation-wrapper-component>
                        </div>
                        <div class="col-12 col-md-auto d-flex justify-content-center align-items-center">
                            <button type="button" class="btn btn-lg btn-primary fs-11 w-100" @click="submitSearch()">Download</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import { reactive } from 'vue';
import useVuelidate from '@vuelidate/core';
import { required } from '@vuelidate/validators';
import { useRequest } from '@/composables/useRequest';

const props = defineProps<{
    data?: any;
    section?: string;
}>();

const { submit } = useRequest();

const parameters = reactive({
    startDate: '',
    endDate: '',
    supplier: null,
    supplierIds: [] as number[],
    supplierNames: [] as string[]
});

const rules = {
    parameters: {
        startDate: { required },
        endDate: { required },
        supplierIds: { required },
        supplierNames: { required },
    }
};

const v$ = useVuelidate(rules, { parameters });

const updateList = (supplierList: any[]) => {
    const ids: number[] = [];
    const names: string[] = [];
    supplierList.forEach(supplier => {
        ids.push(supplier.id);
        names.push(supplier.name);
    });
    parameters.supplierIds = ids;
    parameters.supplierNames = names;
};

const submitSearch = async () => {
    const isFormCorrect = await v$.value.$validate();
    if (!isFormCorrect) return;

    const supplierIdsStr = JSON.stringify(parameters.supplierIds);
    const url = route('export.transactions.booking') + 
                '?startDate=' + parameters.startDate + 
                '&endDate=' + parameters.endDate + 
                '&supplierIds=' + supplierIdsStr;

    if ((window as any).LARAVEL_VAPOR_ENABLED) {
        submit(url, 'get', props.section, false, false, null, {
            successHandler: (response: any) => {
                if (response.src) {
                    window.open(response.src, '_blank');
                }
            }
        });
    } else {
        window.open(url, '_blank');
    }
};
</script>
