﻿<template>
    <div
        class="relative"
        @click="isCurrentCreator && openBannerEditor()"
        @mouseenter="showTint = isCurrentCreator"
        @mouseleave="showTint = false"
    >
        <div class="size-[110px] rounded-full border-4 border-hPrimary">
            <img
                :alt="t('logoAlt')"
                :src="brandingStore.value?.portraitUrl ?? '/images/placeholders/profile.png'"
                class="rounded-full"
                height="110px"
                width="110px"
            />
        </div>

        <!-- Tint Effect -->
        <div
            v-if="showTint"
            :title="t('editLogo')"
            class="absolute inset-0 cursor-pointer rounded-full bg-black/25"
        >
            <!-- Top-right Icon -->
            <div
                class="absolute right-0 top-0 flex size-12 items-center justify-center rounded-full bg-hutopyPrimary shadow-lg"
            >
                <v-icon
                    :icon="mdiPencil"
                    large
                />
            </div>
        </div>
    </div>

    <v-dialog
        v-model="isDialogOpen"
        max-width="800px"
    >
        <template #default="{ close }">
            <creator-logo-editor
                :creator="brandingStore?.value"
                @closeRequested="() => (isDialogOpen = false)"
            ></creator-logo-editor>
        </template>
    </v-dialog>
</template>

<script setup>
    import { useAuthStore } from '@/stores/authStore.js';
    import { useBrandingStore } from '@/stores/brandingStore.js';
    import CreatorLogoEditor from '@/views/creators/CreatorLogoEditor.vue';
    import { computed, ref } from 'vue';
    import { useI18n } from 'vue-i18n';
    import { mdiPencil } from '@mdi/js';

    const authStore = useAuthStore();
    const brandingStore = useBrandingStore();
    const { t } = useI18n();

    // State
    const showTint = ref(false);
    const isDialogOpen = ref(false);

    // Methods
    const openBannerEditor = () => {
        isDialogOpen.value = true;
    };

    const isCurrentCreator = computed(() => {
        return authStore.userId === brandingStore.value.id;
    });
</script>

<style scoped>
    .logo-image {
        @apply border-4 border-solid border-hTertiary;
    }
</style>

<i18n>
{
    "en": {
        "logoAlt": "Creator logo",
        "editLogo": "Edit logo"
    },
    "fr": {
        "logoAlt": "Logo du créateur",
        "editLogo": "Modifier le logo"
    }
}
</i18n>
