<script setup lang="ts">
import { useImagesStore } from '~/store/images';

const props = defineProps(['file_id', 'image_aws_url', 'type'])
const imagesStore = useImagesStore()

const img = ref(imagesStore.getImage(props.file_id, props.image_aws_url ? 'aws' : 'tg'))
const isOpen = ref(false)

const openImage = () => {
    isOpen.value = !isOpen.value
}
watch(imagesStore, () => {
    img.value = imagesStore.getImage(props.file_id, props.image_aws_url ? 'aws' : 'tg')
}, { deep: true })
</script>
<template>
    <template v-if="img.status == 'success'">
        <template v-if="props.type == 'img'">
            <a href="#" @click.prevent="openImage">
                <NuxtImg :src="img.result" />
            </a>
        </template>
        <template v-else>
            <a href="#" @click.prevent="openImage">
                <Icon name="i-mdi-image" />
            </a>
        </template>
        <UModal v-model="isOpen" :ui="{ width: 'w-full', }">
            <img :src="img.result" />
        </UModal>
    </template>
    <template v-else-if="img.status == 'error'">
        <Icon name="i-mdi-close-circle-outline" /> <span class="text-sm text-gray-600">Фото не найдено</span>
    </template>
    <template v-else-if="img.status == 'pending'"> <span class="text-sm text-gray-600">Фото загружается</span>
        <Icon name="i-mdi-reload" />
    </template>
    <template v-else-if="img.status == 'idle'">
        <Icon name="i-mdi-progress-question" />
    </template>
</template>