﻿<template>
    <div class="relative">
        <!-- Banner Container with mouse events -->
        <div
            class="relative overflow-y-auto rounded-b-2xl"
            @click="isCurrentCreator && openBannerEditor()"
            @mouseenter="showTint = isCurrentCreator"
            @mouseleave="showTint = false"
        >
            <img
                :alt="t('alt')"
                :src="brandingStore.value?.bannerUrl ?? '/images/placeholders/banner.png'"
                class="banner aspect-[4/1] w-full object-cover"
            />
            <!-- Tint Effect -->
            <div
                v-if="showTint"
                class="absolute inset-0 cursor-pointer bg-black/25"
            >
                <!-- Top-right Icon -->
                <div
                    class="absolute right-4 top-4 flex size-12 items-center justify-center rounded-full bg-hutopyPrimary shadow-lg"
                >
                    <v-icon
                        :icon="mdiPencil"
                        large
                    />
                </div>
            </div>
        </div>
    </div>

    <v-dialog
        v-model="isDialogOpen"
        max-width="800px"
    >
        <BannerEditor
            :creator="brandingStore.value"
            @closeRequested="() => (isDialogOpen = false)"
        />
    </v-dialog>
</template>

<script setup>
    import BannerEditor from '@/views/creators/BannerEditor.vue';
    import { computed, ref } from 'vue';
    import { useBrandingStore } from '@/stores/brandingStore.js';
    import { useAuthStore } from '@/stores/authStore.js';
    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></style>

<i18n>
{
    "en": {
        "alt": "Creator banner"
    },
    "fr": {
        "alt": "Bannière du créateur"
    }
}
</i18n>
