<template>
    <span class="inline-flex rounded-md shadow-sm">
        <button :class="[defaultClass, sizeClass, styleClass]" v-on:click="confirmDelete()">
            <slot></slot>
        </button>
    </span>
</template>

<script>
export default {
    props : {
        link : {
            required : true
        },
    },
    computed : {
        defaultClass() {
            return 'inline-flex items-center leading-4 font-medium rounded '
                + 'transition ease-in-out duration-150 '
                + 'focus:outline-none focus:border-blue-300 focus:shadow-outline-blue';
        },
        sizeClass() {
            return 'px-2.5 py-1.5 text-xs';
        },
        styleClass() {
            return 'border border-transparent text-white bg-red-500 '
                + 'hover:bg-red-600 focus:border-red-700 active:bg-red-700';
        },
    },
    methods : {
        deleteDialog() {
            return {
                title : 'Are you sure?',
                text : "Please click confirm to delete this item",
                showCancelButton : true,
                heightAuto : false,
                confirmButtonColor : '#D9534F',
                cancelButtonColor : '#DDDDDD',
                confirmButtonText : 'Yes, delete it!'
            }
        },
        cancelDialog() {
            return { // Show the cancel dialogue
                title : 'Delete Cancelled',
                timer : 1000,
                heightAuto : false,
                confirmButtonColor : '#DDDDDD',
            }
        },
        confirmDelete() {
            let _this = this;

            window.swal
                .fire(_this.deleteDialog())
                .then((result) => {
                    // result.value can be true or false when used with confirmButton,
                    // and undefined when used with no buttons
                    if (result.value) {
                        window.location.href = _this.link;

                        return;
                    }

                    // result.dismiss can be 'cancel', 'overlay', 'close', and 'timer'
                    if (result.dismiss === window.swal.DismissReason.cancel) {
                        window.swal.fire(_this.cancelDialog());
                    }
                });
        },
    }
}
</script>
