<template>
    <div class="seller-upload-image">
        <div v-if="!source" @drop.prevent="chooseImage('dataTransfer', $event)" @dragover.prevent>
            <i class="isax isax-gallery-export"></i>
            <p>{{ 'cover' in $attrs ? $t('coverImage') : '&nbsp;' }}</p>
            <h2>{{ $t('forUploadImages') }} </h2>
            <span @click="showImages()">{{ $t('clickHere') }}</span>
        </div>
        <div v-else>
            <img :src="source" />
            <Button :label="$t('placement')" severity="secondary" text raised @click="showImages()" />
            <Button :label="$t('delete')" severity="secondary" text raised @click="deleteImage()" />
        </div>
        <input ref="input" type="file" hidden @input="chooseImage('target', $event)">
    </div>
</template>

<script setup>
const image = defineModel()
const input = ref()
const source = ref()

const showImages = () => input.value.click();
const deleteImage = () => {
    image.value = null
    source.value = null
    input.value.value = null
}
const chooseImage = (name, e) => {
    const binaryData = [];
    binaryData.push(e[name].files[0]);
    source.value = URL.createObjectURL(new Blob(binaryData, { type: "image" }))
    image.value = e[name].files[0];
}

onMounted(() => {
    if(image.value) source.value = image.value
})
</script>

<style lang="scss">
.seller-upload-image {
    @apply w-[21.4rem] h-[21.4rem] lg:w-[24.8rem] lg:h-[24.8rem] bg-white;

    &>div:not(:has(img)) {
        @apply h-full flex flex-col justify-center items-center border border-[#47B556] border-dashed rounded-[0.6rem];


        i {
            @apply text-[3.1em] lg:text-[3.8em] text-[#47B556];
        }

        p {
            @apply text-[#7F7F7F] text-[0.6em] lg:text-sm font-medium font-vazir mt-6;
        }

        h2 {
            @apply text-[#333333] text-sm lg:text-lg font-medium font-vazir mt-1.5;
        }

        span {
            @apply text-[#47B556] text-sm lg:text-lg font-medium font-vazir cursor-pointer;
        }
    }

    &>div:has(img) {
        @apply h-full flex flex-col gap-3 justify-center items-center relative;

        img {
            @apply h-full w-full absolute object-cover rounded-[0.6rem];
        }

        button {
            @apply w-[7.5rem] h-[3.1rem] bg-white z-[1];
        }

        &::after{
            @apply bg-[#47B556]/20 absolute content-['_'] inset-0 rounded-[0.6rem];
        }
    }
}
</style>