<script setup>
import { ref, computed } from 'vue';
import { useRoute } from 'vue-router';
import { useI18n } from 'vue-i18n';
import CardDescriptor from 'components/ui/CardDescriptor.vue';
import VnLv from 'src/components/ui/VnLv.vue';
import useCardDescription from 'src/composables/useCardDescription';
import AccountDescriptorMenu from './AccountDescriptorMenu.vue';
import FetchData from 'src/components/FetchData.vue';
import VnImg from 'src/components/ui/VnImg.vue';

const $props = defineProps({
    id: {
        type: Number,
        required: false,
        default: null,
    },
});

const route = useRoute();
const { t } = useI18n();
const entityId = computed(() => {
    return $props.id || route.params.id;
});
const data = ref(useCardDescription());
const setData = (entity) => (data.value = useCardDescription(entity.nickname, entity.id));

const filter = {
    where: { id: entityId },
    fields: ['id', 'nickname', 'name', 'role'],
    include: { relation: 'role', scope: { fields: ['id', 'name'] } },
};
const hasAccount = ref(false);
</script>

<template>
    <FetchData
        :url="`Accounts/${entityId}/exists`"
        auto-load
        @on-fetch="(data) => (hasAccount = data.exists)"
    />
    <CardDescriptor
        ref="descriptor"
        url="VnUsers/preview"
        :filter="filter"
        module="Account"
        @on-fetch="setData"
        data-key="AccountId"
        :title="data.title"
        :subtitle="data.subtitle"
    >
        <template #menu>
            <AccountDescriptorMenu :has-account="hasAccount" />
        </template>
        <template #before>
            <VnImg :id="entityId" collection="user" resolution="520x520" class="photo">
                <template #error>
                    <div
                        class="absolute-full picture text-center q-pa-md flex flex-center"
                    >
                        <div>
                            <div class="text-grey-5" style="opacity: 0.4; font-size: 5vh">
                                <QIcon name="vn:claims" />
                            </div>
                            <div class="text-grey-5" style="opacity: 0.4">
                                {{ t('account.imageNotFound') }}
                            </div>
                        </div>
                    </div>
                </template>
            </VnImg>
        </template>
        <template #body="{ entity }">
            <VnLv :label="t('account.card.nickname')" :value="entity.name" />
            <VnLv :label="t('account.card.role')" :value="entity.role.name" />
        </template>
        <template #icons="{ entity }">
            <QCardActions class="q-gutter-x-md">
                <QIcon
                    v-if="!entity.active"
                    color="primary"
                    name="vn:disabled"
                    flat
                    round
                    size="xs"
                    class="fill-icon"
                >
                    <QTooltip>{{ t('account.card.deactivated') }}</QTooltip>
                </QIcon>
                <QIcon
                    color="primary"
                    name="contact_mail"
                    v-if="hasAccount"
                    flat
                    round
                    size="xs"
                    class="fill-icon"
                >
                    <QTooltip>{{ t('account.card.enabled') }}</QTooltip>
                </QIcon>
            </QCardActions>
        </template>
    </CardDescriptor>
</template>
<style scoped>
.q-item__label {
    margin-top: 0;
}
</style>
<i18n>
    en:
        accountRate: Claming rate
    es:
        accountRate: Ratio de reclamación
</i18n>