<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';
import { getCssVar } from 'quasar';

const $props = defineProps({
    workerId: { type: Number, required: true },
    description: { type: String, default: null },
    title: { type: String, 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?.toUpperCase() || t('globals.system'));
const showLetter = ref(false);
const backgroundColor = computed(() => {
    const color = $props.color || useColor(title.value);
    return getCssVar(color) || color;
});

watch(src, () => (showLetter.value = false));
</script>
<template>
    <div class="column items-center">
        <QAvatar
            :style="{ backgroundColor }"
            v-bind="$attrs"
            :title="title || t('globals.system')"
        >
            <template v-if="showLetter">
                {{ 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>
<style lang="scss" scoped>
[size='xxl'] {
    .q-avatar,
    .q-img {
        width: 80px;
        height: 80px;
    }

    .q-img {
        object-fit: cover;
    }
}
</style>
