<template>
    <div :id="item.id" class="mb-2" :class="{ selected : isSelected }">

        <div class="overflow-hidden shadow group" :class="isSelected ? 'bg-primary-100' : 'bg-white hover:bg-gray-100'">
            <div class="px-4 py-3">

                <div class="flex md:flex-initial items-center">
                    <div class="flex flex-1">
                        <span
                            class="inline-flex self-center mr-4 px-3 py-0.5 rounded-full text-sm font-medium leading-5 bg-gray-100 text-gray-800 group-hover:bg-gray-200"
                        >
                            {{ index + 1 }}
                        </span>
                        <span class="inline-flex self-center md:flex-initial text-sm">
                            <span class="text-gray-400 mr-1">File:</span>
                            {{ item.name }}
                        </span>
                    </div>
                    <div class="flex text-right">
                        <span class="inline-flex self-end rounded-md shadow-sm">
                            <a
                                :href="this.showUrl + '/' + item.uuid"
                                title="View Item"
                                target="_blank"
                                class="inline-flex items-center px-2.5 py-1.5 md:mr-2 border border-gray-300 text-xs leading-4 font-medium rounded text-gray-700 bg-white hover:bg-gray-500 hover:text-white focus:outline-none focus:border-blue-300 focus:shadow-outline-blue transition ease-in-out duration-150"
                            >
                                View
                            </a>
                        </span>
                        <span class="inline-flex self-end rounded-md shadow-sm">
                            <a
                                :href="this.downloadUrl + '/' + item.uuid"
                                title="Download Item"
                                target="_blank"
                                class="inline-flex items-center px-2.5 py-1.5 md:mr-2 border border-gray-300 text-xs leading-4 font-medium rounded text-gray-700 bg-white hover:bg-gray-500 hover:text-white focus:outline-none focus:border-blue-300 focus:shadow-outline-blue transition ease-in-out duration-150"
                            >
                                Download
                            </a>
                        </span>
                        <span class="inline-flex self-end rounded-md shadow-sm">
                            <button
                                @click.prevent="deleteItem(item, index)"
                                title="Delete Item"
                                type="button"
                                class="inline-flex items-center px-2.5 py-1.5 border border-red-300 text-xs leading-4 font-medium rounded text-red-700 bg-white hover:bg-red-500 hover:text-white focus:outline-none focus:border-blue-300 focus:shadow-outline-blue transition ease-in-out duration-150"
                            >
                                Delete
                            </button>
                        </span>
                    </div>
                </div>

            </div>
        </div>

    </div>
</template>


<script>
export default {
    props : {
        index : null,
        item : null,
        currentItem : null,
        showUrl : null,
        downloadUrl : null,
    },
    computed : {
        isSelected() {
            return (this.currentItem && this.currentItem.id === this.item.id);
        },
    },
    methods : {
        deleteItem() {
            window.swal.fire({
                title : 'Are you sure?',
                text : "Please click confirm to delete this item",
                type : 'warning',
                showCancelButton : true,
                heightAuto : false,
                confirmButtonColor : '#D9534F',
                cancelButtonColor : '#DDDDDD',
                confirmButtonText : 'Yes, delete it!'

            }).then((result) => {
                if (result.value) {
                    this.$emit('deleteItem', this.item, this.index);

                } else if (result.dismiss === window.swal.DismissReason.cancel) { // dismiss can be 'cancel', 'overlay', 'close', and 'timer'
                    window.swal.fire({ // Show the cancle dialogue
                        title : 'Delete Cancelled',
                        type : 'error',
                        timer : 1000,
                        heightAuto : false,
                        confirmButtonColor : '#DDDDDD',
                    });
                }
            });
        },
    }
}
</script>
