<template>
    <section class="flex flex-col gap-4 ">
        <div class="flex flex-col gap-1">
            <FileUpload mode="advanced" accept="image/*" multiple :maxFileSize="10490000" @select="chooseImages"
                @remove="chooseImages" :invalidFileSizeMessage="$t('invalidFileSizeMessage')">
                <template #header="{ chooseCallback }">
                    <div class="flex justify-between w-full items-center">
                        <h2 class="font-bold text-xl ">{{ $t('imagesGallery') }}</h2>
                        <Button :label="$t('chooseImage')" severity="secondary" icon="pi pi-images" text
                            @click="chooseCallback()" />
                    </div>
                </template>
                <template #content="{ files, removeFileCallback }">
                    <div v-if="files.length > 0" class="flex gap-4 justify-between ">
                        <div class="flex gap-4 w-96 h-96 relative m-4 rounded-lg overflow-hidden bg-gray-50 shrink-0">
                            <img :src="form.coverImage?.objectURL || form.coverImage" class="object-cover">
                            <div class=" bg-black/60  absolute bottom-2 right-2 flex rounded-full px-4 py-2">
                                <span class="text-white text-sm m-auto"> {{ $t('mainImage') }}</span>
                            </div>
                        </div>
                        <Listbox v-model="form.coverImage" :options="files" @change="changeCoverImage(files)"
                            class="border-none" listStyle="max-height:26rem">
                            <template #option="{ option, index }">
                                <div class="flex flex-row-reverse gap-4 items-center w-96 rounded">
                                    <img :src="option.objectURL || option"
                                        class="w-24 h-20 object-cover object-center rounded-lg">
                                    <div class="flex items-end justify-center h-full flex-col gap-4 ">
                                        <h3 class="font-bold truncate w-40 text-left">{{ option.name }}</h3>
                                        <span dir="ltr" class="text-sm">{{ formatSize(option.size) }}</span>
                                    </div>
                                    <Button icon="pi pi-times" size="small" text rounded severity="danger"
                                        class="ml-auto p-0 w-6 h-6" @click="removeFileCallback(index)" />
                                </div>
                            </template>
                        </Listbox>
                    </div>

                </template>
                <template #empty>
                    <div class="flex items-center justify-center flex-col gap-8 py-12 h-96">
                        <i class="pi pi-images border-2 rounded-full p-5 text-8xl text-400 border-400" />
                        <p>{{ $t('Drag and drop images to here to upload.') }}</p>
                    </div>
                </template>
            </FileUpload>
            <small v-if="errors.coverImage || errors.images" class="p-error">
                {{ errors.coverImage || errors.images }}
            </small>
        </div>
        <div class="flex pt-4 justify-content-end">
            <Button :label="$t('back')" outlined severity="secondary" class="ml-auto" @click="$emit('close')" />
            <Button :label="$t('next')" icon="pi pi-arrow-left" iconPos="right" severity="success"
                @click="$emit('next')" />
        </div>
    </section>
</template>

<script setup>
import { inject } from 'vue';
const dialogRef = inject('dialogRef')

const { form, errors } = inject('data')


</script>

<style lang="scss" scoped></style>