<template>
    <div
        :id="item.id"
        class="mb-2"
        :class="{
            'selected' : isSelected(item, currentItem),
            'mx-3 mt-2' : isChild(item),
        }"
        :data-name="item.name"
        :data-depth="depth"
        :data-index="index"
        :data-sort-order="item.sort_order"
    >
        <div class="overflow-hidden cursor-move group"
             :class="{
                'bg-primary-100' : isSelected(item, currentItem),
                'bg-white hover:bg-gray-100' : ! isSelected(item, currentItem) && ! isChild(item),
                'px-4 py-3 shadow' : ! isChild(item),
                'px-3 py-1 border border-l-4 border-gray-300' : isChild(item),
                'bg-gray-200' : isChild(item) && ! isSelected(item, currentItem),
            }"
        >
            <div class="grid grid-cols-1 lg:grid-cols-3 gap-2 items-center">
                <div class="col-span-2">
                    <span
                        :class="[
                            'mr-1 px-3 py-0.5',
                            'inline-flex items-center',
                            'rounded-full font-medium leading-5',
                            ! isChild(item) ? 'text-sm' : 'text-xs',
                            'bg-gray-100 text-gray-800',
                        ]"
                    >
                        {{ item.attributes.sort_order || index + 1 }}
                    </span>
                    <span class="text-sm">
                        {{ item.attributes.name || '-- --' }}
                    </span>
                    <span
                        :class="[
                            'ml-1 px-2 py-0.5',
                            'inline-flex items-center',
                            'rounded text-xs font-medium leading-4',
                            'bg-indigo-100 text-indigo-800',
                        ]"
                    >
                        {{ item.attributes.type }}
                    </span>
                    <span v-if="isNew(item)" class="font-bold text-orange-500 text-xs">
                        (New Item)
                    </span>
                    <span v-else-if="isDirty(item)" class="font-bold text-red-500 text-xs">
                        (Unsaved Changes)
                    </span>
                </div>
                <div class="col-span-1 text-right md:text-left lg:text-right">
                    <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>

                    <button
                        v-if="hasChildren(item)"
                        @click.prevent="toggleChildren"
                        data-toggle="tooltip"
                        :title="childrenClosed ? 'Show children' : 'Hide children'"
                        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 v-if="childrenClosed" class="w-5 h-5" fill="none" stroke="currentColor"
                             viewBox="0 0 24 24"
                             xmlns="http://www.w3.org/2000/svg"
                        >
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                  d="M19 13l-7 7-7-7m14-8l-7 7-7-7"
                            ></path>
                        </svg>
                        <svg v-else class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"
                             xmlns="http://www.w3.org/2000/svg"
                        >
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                  d="M5 11l7-7 7 7M5 19l7-7 7 7"
                            ></path>
                        </svg>
                    </button>
                </div>
            </div>
        </div>

        <div v-if="hasChildren(item)" :class="{'hidden': childrenClosed}">
            <draggable :list="item.relationships.nested_children" @update="updateChildSortOrder">
                <transition-group name="list" tag="div">
                    <menu-builder-item
                        v-for="(childItem, childIndex) in item.relationships.nested_children"
                        :key="childItem.id"
                        :depth="depth + 1"
                        :index="childIndex"
                        :item="childItem"
                        :parent="item"
                        :parent-index="index"
                        :current-item="currentItem"
                    >
                    </menu-builder-item>
                </transition-group>
            </draggable>
        </div>

    </div>
</template>


<script>
import Draggable from 'vuedraggable';
import MenuBuilderItem from "./MenuBuilderItem";

export default {
    name : "MenuBuilderItem",
    components : {
        Draggable,
        MenuBuilderItem
    },
    props : {
        depth : 0,
        item : null,
        index : null,
        parent : null,
        parentIndex : null,
        currentItem : null,
    },
    data() {
        return {
            childrenClosed : true
        }
    },
    methods : {
        isNew(item) {
            return item.attributes.is_new === true;
        },
        isDirty(item) {
            return item.attributes.is_dirty === true;
        },
        isSelected(item, currentItem) {
            return item
                && currentItem
                && item.id === currentItem.id;
        },
        isChild(item) {
            return item.attributes.parent_id !== null;
        },

        hasChildren(item) {
            return item.relationships
                && item.relationships.nested_children
                && item.relationships.nested_children.length > 0;
        },

        editItem() {
            window.EventBus.$emit('menuBuilder:editItem', {
                item : this.item,
                index : this.index,
                parentItem : this.parent,
                parentIndex : this.parentIndex
            });
        },
        deleteItem() {
            window.EventBus.$emit('menuBuilder:deleteItem', {
                item : this.item,
                index : this.index,
                parentItem : this.parent,
                parentIndex : this.parentIndex
            });
        },

        toggleChildren() {
            this.childrenClosed = !this.childrenClosed;
        },
        updateChildSortOrder() {
            if (!this.hasChildren(this.item)) {
                this.showError('Parent item has no children for updating sort order');

                return;
            }

            this.item.relationships.nested_children.map((item, index) => {
                item.attributes.sort_order = index + 1;
                window.axios.post(`/api/menu-items/${item.id}/update`, {data : item});
            });
        },
    }
}
</script>
