<template>
    <div :id="item.id" class="mb-2">
        <div class="overflow-hidden bg-white hover:bg-gray-100 px-4 py-3 shadow">
            <div class="flex items-center justify-between">
                <div class="flex items-center gap-3">
                    <div class="cursor-move text-gray-400 hover:text-gray-600 drag-handle">
                        <svg class="h-5 w-5" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" d="M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5"></path>
                        </svg>
                    </div>
                    <span class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium leading-4 bg-gray-200 text-gray-700">
                        {{ item.sort_order }}
                    </span>
                    <span class="text-sm font-bold text-gray-800">{{ item.name }}</span>
                    <span class="mx-1 text-gray-300">|</span>
                    <span
                        :class="[
                            'text-xs font-bold',
                            statusTextClass(item),
                        ]"
                    >
                        {{ item.status | ucwords }}
                    </span>
                </div>
                <div>
                    <button
                        @click.prevent="detachItem(item)"
                        title="Detach Question"
                        class="p-1 text-red-400 rounded-full hover:bg-red-100 hover:text-red-500 focus:outline-none focus:shadow-outline focus:text-red-500"
                    >
                        <svg fill="currentColor" viewBox="0 0 20 20" class="h-5 w-5">
                            <path d="M4 3a2 2 0 100 4h12a2 2 0 100-4H4z"></path>
                            <path
                                d="M3 8h14v7a2 2 0 01-2 2H5a2 2 0 01-2-2V8zm5 3a1 1 0 011-1h2a1 1 0 110 2H9a1 1 0 01-1-1z"
                                clip-rule="evenodd" fill-rule="evenodd"
                            ></path>
                        </svg>
                    </button>
                </div>
            </div>
        </div>
    </div>
</template>


<script>
export default {
    name : "CategoryQuestionItem",
    props : {
        item : {type : Object, required : true},
    },
    methods : {
        statusTextClass(item) {
            switch (item.status) {
                case 'active':
                    return 'text-green-600';
                case 'inactive':
                    return 'text-red-500';
                case 'pending':
                default:
                    return 'text-yellow-600';
            }
        },
        detachItem(item) {
            window.swal.fire({
                title : 'Are you sure?',
                text : 'This will remove the question from this category',
                showCancelButton : true,
                confirmButtonColor : '#D9534F',
                confirmButtonText : 'Yes, remove it!',
            }).then((result) => {
                if (result.isConfirmed) {
                    window.EventBus.$emit('categoryQuestion:detachItem', {
                        item : item,
                    });
                }
            });
        },
    }
}
</script>
