<script setup>
import {ref, watch} from "vue";
import {v4 as uuidv4} from 'uuid';

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

const model = defineModel({
  default: {
    id: null,
    color: null,
    translations: {}
  }
})

// Set default for model if translations is empty
if (Object.keys(model.value.translations).length === 0) {
  model.value.translations = props.locales.reduce((acc, locale) => {
    acc[locale] = { name: '' };
    return acc;
  }, {});
}

const form = ref(JSON.parse(JSON.stringify(model.value))); // Deep clone

watch(model, (newValue) => {
  form.value = JSON.parse(JSON.stringify(newValue)); // Ensure fresh copy
}, {deep: true});

const emit = defineEmits(['close', 'createNewOptionValue'])

const submit = () => {
  Object.assign(model.value, form.value);

  if (props.createNewOptionValue) {
    emit('createNewOptionValue', {
      ...form.value,
      id: uuidv4()
    })
  }

  close()
};

const close = () => {
  emit('close')

  form.value = {
    id: null,
    color: null,
    translations: props.locales.reduce((acc, locale) => {
      acc[locale] = { name: '' };
      return acc;
    }, {}),
  }
}
</script>

<template>
  <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-30" aria-labelledby="slide-over-title" role="dialog" aria-modal="true" v-show="visible">

      <div class="fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity z-250" @click.prevent="close"></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="visible"
             class="pointer-events-none fixed inset-y-0 right-0 flex max-w-full pl-10 sm:pl-16 z-500">
          <div class="pointer-events-auto w-screen max-w-xl">
            <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::store.option_value') }}</h2>
                      <p class="text-sm text-white text-opacity-75">{{ __('daylight::store.configure_option_values') }}</p>
                    </div>

                    <div class="flex h-7 items-center">
                      <button @click.prevent="close" 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 v-for="(translation, locale) in form.translations"
                       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="text-sm font-medium leading-6 text-gray-900 sm:mt-1.5 flex items-center">
                        {{ __('daylight::general.name_locale', { locale: locale.toUpperCase() }) }}
                      </label>
                    </div>
                    <div class="sm:col-span-2">
                      <input v-model="translation.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"
                       v-if="type === 'swatches'">
                    <div>
                      <label for="color"
                             class="text-sm font-medium leading-6 text-gray-900 sm:mt-1.5 flex items-center">
                        Color
                      </label>
                    </div>
                    <div class="sm:col-span-2">
                      <input v-model="form.color" type="text" placeholder="#FF0000" id="color"
                             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="close"
                          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="submit"
                      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>
</template>
