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

const props = defineProps({
  currentLocale: {
    type: String,
    required: true,
    default: 'nl'
  },
  locales: {
    type: Array,
    required: true,
    default: []
  }
})

const model = defineModel({default: []})

const createNewOption = ref(false)
const showOptionModal = ref(false)
const currentOption = ref(undefined)

const getOptionValueLine = (optionValues) => {
  return optionValues.map(optionValue => {
    return optionValue.translations[props.currentLocale].name
  }).join(' / ')
}

const newOptionCreated = (option) => {
  model.value.push(option)

  closeModal()
}

const deleteOption = (index) => {
  model.value.splice(index, 1)
}

const closeModal = () => {
  setTimeout(() => {
    currentOption.value = undefined
  }, 300)

  createNewOption.value = false
  showOptionModal.value = false
}
</script>

<template>
  <div class="grid grid-cols-2">
    <div>
      <h2 class="mb-6 mt-6">{{ __('daylight::store.product_options') }}</h2>
      <VueDraggableNext class="dragArea" tag="ul" :list="modelValue" :group="{ name: 'g1' }">
        <li v-for="(option, index) in modelValue" :key="`${option.id}`">
          <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-3 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>
                <p class="text-sm font-semibold">{{ option.translations[currentLocale].name }}</p>
                <p class="text-xs opacity-50">{{ getOptionValueLine(option.optionValues) }}</p>
              </div>
            </div>

            <div class="flex items-center gap-3">
              <button @click.prevent="currentOption = model[index]; showOptionModal = true;" 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="deleteOption(index)" 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>
        </li>
      </VueDraggableNext>

      <button @click.prevent="createNewOption = true; showOptionModal = true" 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-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>

        {{ __('daylight::store.add_new_option') }}
      </button>
    </div>

    <OptionSlideOver
        :visible="showOptionModal"
        :currentLocale="currentLocale"
        :createNewOption="createNewOption"
        :locales="locales"
        v-model="currentOption"
        @close="closeModal"
        @createNewOption="newOptionCreated"
    />
  </div>
</template>
