<template>
  <div class="relative" ref="addComponentMenu">
    <button @click.prevent="addComponentMenuOpen = !addComponentMenuOpen" type="button"
            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-6 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>

      {{ __('daylight::general.add_component') }}
    </button>

    <transition
        enter-active-class="transition ease-out duration-100"
        enter-from-class="transform opacity-0 scale-95"
        enter-to-class="transform opacity-100 scale-100"
        leave-active-class="transition ease-in duration-75"
        leave-from-class="transform opacity-100 scale-100"
        leave-to-class="transform opacity-0 scale-95"
    >
      <div v-show="addComponentMenuOpen"
           class="absolute right-0 z-10 mt-2 w-56 origin-top-right rounded-md bg-white shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none"
           role="menu" aria-orientation="vertical" aria-labelledby="menu-button" tabindex="-1">
        <div class="py-1" role="none">
          <button v-for="availableComponent in availableComponents"
                  @click.prevent="addComponent(availableComponent.type)"
                  class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-50 w-full text-left" role="menuitem"
                  tabindex="-1" id="menu-item-0">
            {{ availableComponent.name }}
          </button>
        </div>
      </div>
    </transition>
  </div>
</template>

<script setup>
import {ref} from "vue";
import useDetectOutsideClick from "../../../composables/useDetectOutsideClick.js";

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

const emit = defineEmits(['componentAdded']);

const addComponentMenuOpen = ref(false)
const addComponentMenu = ref(null)

useDetectOutsideClick(addComponentMenu, () => {
  if (addComponentMenuOpen.value === true) {
    addComponentMenuOpen.value = false
  }
})

const addComponent = (type) => {
  let definition = props.availableComponents.find(component => component.type === type)

  let fields = definition.fields
      .map(field => {
        if (field.type === 'repeater') {
          return {
            [field.name]: []
          }
        }

        if (field.type === 'button') {
          return {
            [field.name]: {
              url: null,
              label: null
            }
          }
        }

        return {
          [field.name]: null
        }
      })
      .reduce((acc, key) => ({...acc, ...key}), {});

  emit('componentAdded', {
    id: null,
    uploads: [],
    type: definition.type,
    data: fields
  })

  addComponentMenuOpen.value = false
}
</script>