<script setup>
import {ref} from "vue";
import {VueDraggableNext} from "vue-draggable-next";
import MediaLibraryModal from "./MediaLibraryModal.vue";
import SecondaryButton from "../../components/Buttons/SecondaryButton.vue";
import {imageUrl} from "./utils.js";

const props = defineProps({
  name: {
    type: String,
    required: true
  },
  initialMedia: {
    type: Array,
    required: false,
    default: () => []
  },
  displayType: {
    type: String,
    required: false,
    default: 'gallery'
  },
  singleFile: {
    type: Boolean,
    default: false
  }
})

const items = ref(props.initialMedia);
const showMediaLibrary = ref(false);

const filesSelected = (files) => {
  items.value = files;
}

const deleteItem = (item) => {
  items.value = items.value.filter(i => i.id !== item.id);
}

const isImage = (item) => {
  return [
    'image/jpeg',
    'image/jpg',
    'image/png',
    'image/gif',
    'image/svg+xml',
    'image/webp',
  ].includes(item.type);
}

const isVideo = (item) => {
  return [
    'video/mp4',
    'video/quicktime',
  ].includes(item.type);
}

</script>

<template>
  <div>
    <VueDraggableNext
        class="dragArea gap-2 mb-4"
        :class="{ 'flex': displayType === 'gallery', 'lg:max-w-xl': displayType === 'list' }"
        tag="ul"
        :list="items"
        :group="{ name: 'g1' }"
    >
      <li v-for="item in items" :key="item.id" class="group flex relative" :class="{ 'mb-4': displayType === 'list', 'bg-gray-50': displayType === 'gallery' }">
        <img :src="imageUrl(item)" alt="" class="w-24 h-24 rounded-lg border object-cover" v-if="displayType === 'gallery' && isImage(item)"/>

        <div v-else-if="isVideo(item)" class="w-24 h-24 rounded-lg border relative flex items-center justify-center">
          <div class="absolute bg-black bg-opacity-50 inset-0 flex items-center justify-center backdrop-blur rounded-lg">
            <svg class="w-6 h-6 text-white" 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="m15.75 10.5 4.72-4.72a.75.75 0 0 1 1.28.53v11.38a.75.75 0 0 1-1.28.53l-4.72-4.72M4.5 18.75h9a2.25 2.25 0 0 0 2.25-2.25v-9a2.25 2.25 0 0 0-2.25-2.25h-9A2.25 2.25 0 0 0 2.25 7.5v9a2.25 2.25 0 0 0 2.25 2.25Z"></path>
            </svg>
          </div>

          <img :src="imageUrl(item)" alt="" class="w-full h-full rounded-lg border object-cover"/>
        </div>

        <div v-else class="border w-full p-3 text-gray-600 rounded-lg text-sm flex items-center">
          <svg class="w-4 h-4 mr-2 text-gray-600" 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="m18.375 12.739-7.693 7.693a4.5 4.5 0 0 1-6.364-6.364l10.94-10.94A3 3 0 1 1 19.5 7.372L8.552 18.32m.009-.01-.01.01m5.699-9.941-7.81 7.81a1.5 1.5 0 0 0 2.112 2.13"></path>
          </svg>
          {{ item.name }}
        </div>

        <button @click.prevent="deleteItem(item)" class="group-hover:opacity-100 opacity-0 transition absolute top-2 right-2 bg-red-600 p-2 rounded-full hover:bg-red-500">
          <svg class="text-white w-3 h-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="m14.74 9-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 0 1-2.244 2.077H8.084a2.25 2.25 0 0 1-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 0 0-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 0 1 3.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 0 0-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 0 0-7.5 0"></path>
          </svg>
        </button>
      </li>
    </VueDraggableNext>

    <SecondaryButton @click.prevent="showMediaLibrary = true">
      {{ displayType === 'gallery' ? __('daylight::media.add_media') : __('daylight::media.add_file') }}
    </SecondaryButton>

    <MediaLibraryModal
        :show="showMediaLibrary"
        :singleFile="singleFile"
        :active="items"
        @close="showMediaLibrary = false"
        @filesSelected="filesSelected"
    />

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