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

        <input type="hidden" :name="'items[' + item.id + '][id]'" :value="item.id">
        <input type="hidden" :name="'items[' + item.id + '][width]'" :value="item.width">
        <input type="hidden" :name="'items[' + item.id + '][label]'" :value="item.label">
        <input type="hidden" :name="'items[' + item.id + '][display_label]'" :value="item.display_label">
        <input type="hidden" :name="'items[' + item.id + '][name]'" :value="item.name">
        <input type="hidden" :name="'items[' + item.id + '][options]'" :value="item.options">
        <input type="hidden" :name="'items[' + item.id + '][class]'" :value="item.class">
        <input type="hidden" :name="'items[' + item.id + '][placeholder]'" :value="item.placeholder">
        <input type="hidden" :name="'items[' + item.id + '][required]'" :value="item.required">
        <input type="hidden" :name="'items[' + item.id + '][type]'" :value="item.type">
        <input type="hidden" :name="'items[' + item.id + '][sort_order]'" :value="item.sort_order">

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

                <div class="flex items-center space-x-2">

                    <div class="flex-grow w-full">

                        <span class="mr-1 inline-flex items-center px-3 py-0.5 rounded-full text-sm font-medium leading-5 bg-gray-100 text-gray-800">
                            {{ index + 1 }}
                        </span>

                        <span v-if="item.type !== 'html'" class="text-sm">
                            {{ item.label || '-- --' }}
                        </span>

                        <span v-if="item.required === 'yes'" class="text-red-500">*</span>

                        <span
                            v-if="item.width"
                            class="ml-1 inline-flex items-center px-2 py-0.5 rounded text-xs font-medium leading-4 bg-orange-100 text-orange-800"
                        >
                            {{ item.width }}
                        </span>

                        <span
                            v-if="item.display_label === 'no'"
                            class="ml-1 inline-flex items-center px-2 py-0.5 rounded text-xs font-medium leading-4 bg-yellow-100 text-yellow-800"
                        >
                            no label
                        </span>

                        <span
                            class="ml-1 inline-flex items-center px-2 py-0.5 rounded text-xs font-medium leading-4 bg-indigo-100 text-indigo-800"
                        >
                            {{ item.type }}
                        </span>
                    </div>

                    <div class="flex-shrink-0 text-right self-end">
                        <button
                            @click.prevent="editItem(item, index)"
                            title="Edit Item"
                            class="p-1 text-gray-400 rounded-full hover:bg-gray-100 hover:text-gray-500 focus:outline-none focus:shadow-outline focus:text-gray-500"
                        >
                            <svg fill="currentColor" viewBox="0 0 20 20" class="h-5 w-5">
                                <path
                                    d="M13.586 3.586a2 2 0 112.828 2.828l-.793.793-2.828-2.828.793-.793zM11.379 5.793L3 14.172V17h2.828l8.38-8.379-2.83-2.828z"
                                ></path>
                            </svg>
                        </button>
                        <button
                            @click.prevent="deleteItem(item, index)"
                            title="Delete Item"
                            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 v-if="item.type === 'html'" class="mt-2">
                    <pre
                        class="w-full inline-flex text-left items-center bg-gray-800 rounded-lg p-4 pl-6"
                        style="text-wrap: auto;"
                    ><code class="max-h-60 overflow-scroll text-sm text-white">{{ item.label || '-- --' }}</code></pre>
                </div>

            </div>
        </div>
    </div>
</template>


<script>
import Draggable from 'vuedraggable';

export default {
    components : {
        Draggable
    },
    props : {
        index : null,
        item : null,
        currentItem : null
    },
    computed : {
        isSelected() {
            return (this.currentItem && this.currentItem.id === this.item.id);
        },
    },
    methods : {
        editItem() {
            this.$emit('editItem', this.item, this.index);
        },
        deleteItem() {
            this.$emit('deleteItem', this.item, this.index);
        },
    }
}
</script>
