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

const $props = defineProps({
    storage: {
        type: [String, Number],
        default: 'Images',
    },
    collection: {
        type: String,
        default: 'catalog',
    },
    size: {
        type: String,
        default: '200x200',
    },
    zoomSize: {
        type: String,
        required: false,
        default: 'lg',
    },
    id: {
        type: Number,
        required: true,
    },
});
const show = ref(false);
const token = useSession().getTokenMultimedia();
const timeStamp = ref(`timestamp=${Date.now()}`);
import noImage from '/no-user.png';
import { useRole } from 'src/composables/useRole';
const url = computed(() => {
    const isEmployee = useRole().isEmployee();
    return isEmployee
        ? `/api/${$props.storage}/${$props.collection}/${$props.size}/${$props.id}/download?access_token=${token}&${timeStamp.value}`
        : noImage;
});
const reload = () => {
    timeStamp.value = `timestamp=${Date.now()}`;
};
defineExpose({
    reload,
});
</script>
<template>
    <QImg
        :class="{ zoomIn: $props.zoomSize }"
        :src="url"
        v-bind="$attrs"
        @click="show = !show"
        spinner-color="primary"
    />
    <QDialog v-model="show" v-if="$props.zoomSize">
        <QImg
            :src="url"
            size="full"
            class="img_zoom"
            v-bind="$attrs"
            spinner-color="primary"
        />
    </QDialog>
</template>

<style lang="scss" scoped>
.q-img {
    &.zoomIn {
        cursor: zoom-in;
    }
    min-width: 50px;
}
.rounded {
    border-radius: 50%;
}
.img_zoom {
    border-radius: 0%;
}
</style>
