<script setup>
import {ref} from "vue";
import NestedMenuItems from "./components/NestedMenuItems.vue";

const props = defineProps({
  items: {
    type: Array,
    default: () => []
  }
})

const formattedMenuItems = ref(props.items);
const editingItem = ref(null)

const addItem = () => {
  formattedMenuItems.value.push({
    name: 'New item',
    url: '#',
    children: []
  })
}
</script>

<template>
  <div>
    <NestedMenuItems :menuItems="formattedMenuItems" @editItem="(e) => editingItem = e"/>

    <button type="button" @click.prevent="addItem" class="rounded-md mt-4 w-full border border-dashed border-gray-300 hover:border-gray-700 transition text-gray-500  hover:text-gray-900 py-5 font-semibold text-sm flex items-center justify-center">
      <svg class="w-4 h-4 mr-3" 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="M12 9v6m3-3H9m12 0a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z"></path>
      </svg>

      Add menu item
    </button>

    <textarea name="items" :value="JSON.stringify(formattedMenuItems)" class="hidden"></textarea>
  </div>
</template>
