<template>
    <div class="row">
        <div class="col-auto" v-show="!isLoading">
            <button id="cancel-new-booking" name="cancel-new-booking" class="btn btn-lg btn-default bg-master-lightest b-rad-none all-caps fs-12" data-dismiss="modal" @click="cancelUpdateBooking()">Cancel</button>
        </div>
        <div class="col text-right" v-show="!isLoading && data && data.bankAccount">
            <button id="confirm-new-booking" name="confirm-new-booking" class="btn btn-lg btn-success b-rad-none all-caps fs-12" v-if="Object.keys(data.bankAccount || {}).length" @click="submitForm()">Update Recipient</button>
        </div>
    </div>
</template>

<script setup lang="ts">
import { useFormHandler } from '@/composables/useFormHandler';
import route from '@/general/functions/router';

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

const emit = defineEmits<{
    (e: 'updatedBooking', bank: any): void;
    (e: 'updateBookingCanceled'): void;
}>();

const { isLoading, submit, closeModal, formHandler } = useFormHandler(props);

const submitForm = () => {
    const params = {
        transferable_bank_id: props.data.bankAccount.id,
    };

    submit(route('api.booking.update.recipient', props.data.bookingId), 'put', props.section, true, true, params, {
        successHandler: () => {
            emit('updatedBooking', props.data.bankAccount);
            formHandler();
            closeModal();
        }
    });
};

const cancelUpdateBooking = () => {
    emit('updateBookingCanceled');
};
</script>
