<script setup>
import { ref, computed } from 'vue';
import { useSession } from 'src/composables/useSession';

const $props = defineProps({
    collection: {
        type: [String, Number],
        default: 'Images',
    },
    size: {
        type: String,
        default: '200x200',
    },
    zoomSize: {
        type: String,
        required: true,
        default: 'lg',
    },
    id: {
        type: Boolean,
        default: false,
    },
});
const show = ref(false);
const token = useSession().getTokenMultimedia();
const timeStamp = `timestamp=${Date.now()}`;
const url = computed(
    () =>
        `/api/${$props.collection}/catalog/${$props.size}/${$props.id}/download?access_token=${token}&${timeStamp}`
);
</script>
<template>
    <QImg
        :src="url"
        class="img"
        v-bind="$attrs"
        @click="show = !show"
        spinner-color="primary"
        :ratio="1"
    />
    <QDialog v-model="show" v-if="$props.zoomSize">
        <QImg
            :src="url"
            class="img_zoom"
            v-bind="$attrs"
            spinner-color="primary"
            :ratio="1"
            style="border-radius: 0%"
        />
    </QDialog>
</template>

<style lang="scss" scoped>
.img {
    cursor: zoom-in;
}
.rounded {
    border-radius: 50%;
}
.img_zoom {
    width: 72%;
    height: auto;
}
</style>
