<script setup>
import { computed, ref, watch } from 'vue';
import { useI18n } from 'vue-i18n';
import { useSession } from 'src/composables/useSession';
import { useColor } from 'src/composables/useColor';

const $props = defineProps({
    workerId: { type: Number, required: true },
    description: { type: String, default: null },
    title: { type: [String, Boolean], default: null },
    color: { type: String, default: null },
});
const { getTokenMultimedia } = useSession();
const token = getTokenMultimedia();
const { t } = useI18n();
const src = computed(
    () => `/api/Images/user/160x160/${$props.workerId}/download?access_token=${token}`
);
const title = computed(() =>
    $props.title !== false ? $props.title || t('globals.system') : false
);
const showLetter = ref(false);

watch(src, () => (showLetter.value = false));
</script>
<template>
    <div class="column items-center">
        <QAvatar
            :style="{
                backgroundColor: color ? color : useColor(title),
            }"
            v-bind="$attrs"
            :title="title !== false ? title : undefined"
        >
            <template v-if="showLetter && title !== false">
                {{ title.charAt(0) }}
            </template>
            <QImg v-else :src="src" spinner-color="white" @error="showLetter = true" />
        </QAvatar>
        <div class="description">
            <slot name="description" v-if="description">
                <p v-text="description" />
            </slot>
        </div>
    </div>
</template>
