<template>
    <div>
        <VueDraggableNext class="dragArea" tag="ul" :list="menuItems" :group="{ name: 'g1' }">
            <li v-for="(menuItem, index) in menuItems" :key="menuItem.name">
                <div class="flex items-center justify-between p-4 mb-2 border rounded">
                    <div class="flex items-center">
                        <svg class="w-4 h-4 mr-4 text-gray-400 cursor-move" data-slot="icon" fill="none"
                             stroke-width="1.5" stroke="currentColor" viewBox="0 0 24 24"
                             xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
                            <path stroke-linecap="round" stroke-linejoin="round"
                                  d="M3 7.5 7.5 3m0 0L12 7.5M7.5 3v13.5m13.5 0L16.5 21m0 0L12 16.5m4.5 4.5V7.5"></path>
                        </svg>

                        <div class="ml-3">
                            <p class="text-sm font-semibold">{{ menuItem.name }}</p>
                            <p class="text-xs opacity-50">URL: {{ menuItem.url }}</p>
                        </div>
                    </div>

                    <div class="flex items-center gap-3">
                        <button @click.prevent="openEditModal(index)"
                                class="p-2 bg-gray-200 rounded-full hover:bg-sky-600 hover:text-white transition">
                            <svg class="w-4 h-4" data-slot="icon" fill="none" stroke-width="1.5" stroke="currentColor"
                                 viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
                                <path stroke-linecap="round" stroke-linejoin="round"
                                      d="m16.862 4.487 1.687-1.688a1.875 1.875 0 1 1 2.652 2.652L10.582 16.07a4.5 4.5 0 0 1-1.897 1.13L6 18l.8-2.685a4.5 4.5 0 0 1 1.13-1.897l8.932-8.931Zm0 0L19.5 7.125M18 14v4.75A2.25 2.25 0 0 1 15.75 21H5.25A2.25 2.25 0 0 1 3 18.75V8.25A2.25 2.25 0 0 1 5.25 6H10"></path>
                            </svg>
                        </button>

                        <button @click.prevent="deleteMenuItem(menuItem)"
                                class="p-2 bg-gray-200 rounded-full hover:bg-red-500 hover:text-white transition">
                            <svg class="w-4 h-4" data-slot="icon" fill="none" stroke-width="1.5" stroke="currentColor"
                                 viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
                                <path stroke-linecap="round" stroke-linejoin="round" d="M6 18 18 6M6 6l12 12"></path>
                            </svg>
                        </button>
                    </div>

                </div>

                <NestedMenuItems :menuItems="menuItem.children" class="ml-8"/>
            </li>
        </VueDraggableNext>

        <transition
            enter-active-class="ease-in-out duration-500"
            enter-from-class="opacity-0"
            enter-to-class="opacity-100"
            leave-active-class="ease-in-out duration-500"
            leave-from-class="opacity-100"
            leave-to-class="opacity-0"
        >
            <div class="relative z-150" aria-labelledby="slide-over-title" role="dialog" aria-modal="true"
                 v-show="form">

                <div class="fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity"
                     @click.prevent="form = false"></div>

                <transition
                    enter-active-class="transform transition ease-in-out duration-500 sm:duration-700"
                    enter-from-class="translate-x-full"
                    enter-to-class="translate-x-0"
                    leave-active-class="transform transition ease-in-out duration-500 sm:duration-700"
                    leave-from-class="translate-x-0"
                    leave-to-class="translate-x-full"
                >
                    <div v-show="form"
                         class="pointer-events-none fixed inset-y-0 right-0 flex max-w-full pl-10 sm:pl-16">
                        <div class="pointer-events-auto w-screen max-w-2xl">
                            <div class="flex h-full flex-col overflow-y-scroll bg-white shadow-xl">
                                <div class="flex-1">
                                    <div class="bg-sky-600 px-4 py-6 sm:px-6">
                                        <div class="flex items-start justify-between space-x-3">
                                            <div class="space-y-1">
                                                <h2 class="text-base font-semibold leading-6 text-white" id="slide-over-title">{{ __('daylight::content.edit_item') }}</h2>
                                                <p class="text-sm text-white text-opacity-75">{{ __('daylight::content.edit_item_message') }}</p>
                                            </div>

                                            <div class="flex h-7 items-center">
                                                <button @click.prevent="form = false" type="button"
                                                        class="relative text-gray-400 hover:text-gray-500">
                                                    <span class="absolute -inset-2.5"></span>
                                                    <span class="sr-only">{{ __('daylight::general.close_panel') }}</span>
                                                    <svg class="h-6 w-6" fill="none" viewBox="0 0 24 24"
                                                         stroke-width="1.5" stroke="currentColor" aria-hidden="true">
                                                        <path stroke-linecap="round" stroke-linejoin="round"
                                                              d="M6 18L18 6M6 6l12 12"/>
                                                    </svg>
                                                </button>
                                            </div>
                                        </div>
                                    </div>

                                    <!-- Divider container -->
                                    <div class="space-y-6 py-6 sm:space-y-0 sm:divide-y sm:divide-gray-200 sm:py-0">
                                        <!-- Project name -->
                                        <div
                                            class="space-y-2 px-4 sm:grid sm:grid-cols-3 sm:gap-4 sm:space-y-0 sm:px-6 sm:py-5">
                                            <div>
                                                <label for="name" class="block text-sm font-medium leading-6 text-gray-900 sm:mt-1.5">{{ __('daylight::general.name') }}</label>
                                            </div>
                                            <div class="sm:col-span-2">
                                                <input v-model="form.name" type="text" id="name"
                                                       class="block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6">
                                            </div>
                                        </div>

                                        <div
                                            class="space-y-2 px-4 sm:grid sm:grid-cols-3 sm:gap-4 sm:space-y-0 sm:px-6 sm:py-5">
                                            <div>
                                                <label for="url"
                                                       class="block text-sm font-medium leading-6 text-gray-900 sm:mt-1.5">{{ __('daylight::general.url') }}</label>
                                            </div>
                                            <div class="sm:col-span-2">
                                                <input v-model="form.url" type="text" id="url"
                                                       class="block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6">
                                            </div>
                                        </div>

                                    </div>
                                </div>

                                <!-- Action buttons -->
                                <div class="flex-shrink-0 border-t border-gray-200 px-4 py-5 sm:px-6">
                                    <div class="flex justify-end space-x-3">
                                        <button type="button" @click.prevent="form = false" class="bg-white text-sky-600 hover:opacity-75 border-sky-600 py-2.5 px-4 border rounded-md text-sm leading-5 font-medium focus:outline-none focus:border-blue-300 focus:shadow-outline-blue transition duration-150 ease-in-out">
                                            {{ __('daylight::general.cancel') }}
                                        </button>

                                        <button type="button" @click.prevent="saveEditModal" class="bg-sky-600 text-white hover:bg-sky-700 border-sky-600 text-sm py-2.5 px-4 border rounded-md leading-5 font-medium focus:outline-none focus:border-blue-300 focus:shadow-outline-blue transition duration-150 ease-in-out">
                                            {{ __('daylight::general.save') }}
                                        </button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </transition>
            </div>
        </transition>
    </div>
</template>

<script setup>
import {VueDraggableNext} from "vue-draggable-next";
import {ref} from "vue";

const props = defineProps({
    menuItems: Array,
})

window.addEventListener('keydown', (e) => {
    if (e.key === 'Escape') {
        form.value = false;
    }
});

const form = ref(false)

const openEditModal = (index) => {
    form.value = {
        index: index,
        ...props.menuItems[index]
    };
}


const saveEditModal = () => {
    props.menuItems[form.value.index] = {
        name: form.value.name,
        url: form.value.url,
        children: form.value.children
    };

    form.value = false;
}

const deleteMenuItem = (element) => {
    const index = props.menuItems.indexOf(element);

    props.menuItems.splice(index, 1);
}
</script>
