<script setup>
import {formatFileSize, imageUrl} from "../../../MediaLibrary/utils.js";
import {ref} from "vue";
import SecondaryButton from "../../../../components/Buttons/SecondaryButton.vue";
import MediaLibraryModal from "../../../MediaLibrary/MediaLibraryModal.vue";

const props = defineProps({
    field: Object,
    wire: {}
})

const model = defineModel();
const showMediaLibrary = ref(false);

const deleteMedia = (media) => {
    model.value = model.value.filter(m => m.id !== media.id);
}

const addMedia = () => {
    console.log('Trigger media library');
}

const filesSelected = (files) => {
    model.value = files;
}
</script>

<template>
    <div>
        <div v-for="media in model" class="flex items-center border rounded-lg mb-2 p-2">
            <img :src="imageUrl(media)" alt="" class="w-24 h-24 rounded-lg border object-cover">
            <div class="ml-4">
                <p class="font-medium text-sm text-gray-700">{{ media.name }}</p>
                <p class="text-gray-500 text-xs mt-0.5">{{ formatFileSize(media.size) }}</p>

                <button class="mt-2 text-red-500 text-sm flex items-center" @click.prevent="deleteMedia(media)">
                    <svg class="w-4 h-4 mr-1" 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>

                    Delete
                </button>
            </div>
        </div>

        <SecondaryButton v-if="field.amountOfFiles > 1 || !model || model.length === 0" @click.prevent="showMediaLibrary = true">
            Add media
        </SecondaryButton>

        <MediaLibraryModal
            :show="showMediaLibrary"
            :singleFile="field.amountOfFiles === 1"
            @close="showMediaLibrary = false"
            @filesSelected="filesSelected"
        />
    </div>
</template>
