<template>
    <div class="row m-b-10 parentContainer">
        <div class="col">
            <div class="row align-items-center">
                <div class="col p-t-5 p-b-5">
                    <div class="col text-center">
                        <div class="row m-b-20">
                            <div class="col">
                                <h5 class="all-caps">Delete address</h5>
                                <div class="fs-11">Are you sure you want to delete? This action is undoable.</div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col p-r-5">
                                <div data-dismiss="modal" class="btn btn-sm btn-default bg-master-lighter btn-block b-rad-none">Cancel</div>
                            </div>
                            <div class="col p-l-5">
                                <div data-dismiss="modal" class="btn btn-sm btn-success btn-block b-rad-none" @click="deleteAddress">Delete</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

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

interface Props {
    address_id: number;
    section: string;
}

const props = defineProps<Props>();

const queueStore = useQueueStore();
const { submit, formHandler } = useFormHandler({ section: props.section });

const deleteAddress = () => {
    submit(route('api.address.delete', props.address_id), 'delete', props.section, true, true, null, {
        successHandler: () => {
            queueStore.reloadList({ name: "addresslist" });
        },
        errorHandler: (response: any) => {
            formHandler(response.message);
        }
    });
};

</script>
