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

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

const img = ref(imagesStore.getImage(props.file_id))
const isOpen = ref(false)

const openImage = () => {
    isOpen.value = !isOpen.value
}
console.log(imagesStore.getImage(props.file_id))
watch(imagesStore, () => {
    img.value = imagesStore.getImage(props.file_id)
}, { deep: true })
</script>
<template>
    <template v-if="img.status == 'success'">
        <a href="#" @click.prevent="openImage">
            <Icon name="i-mdi-image"  />
        </a>
        <UModal v-model="isOpen">
            <img :src="img.result" />
        </UModal>
    </template>
    <template v-else-if="img.status == 'error'">
        <Icon name="i-mdi-close-circle-outline" />
    </template>
    <template v-else-if="img.status == 'pending'">
        <Icon name="i-mdi-reload" />
    </template>
    <template v-else-if="img.status == 'idle'">
        <Icon name="i-mdi-progress-question" />
    </template>
</template>