﻿<template>
  <div class="relative"
       @mouseenter="showTint = isCurrentCreator"
       @mouseleave="showTint = false"
       @click="isCurrentCreator && openBannerEditor()"
  >

    <div class="rounded-full border-4 border-hPrimary w-[110px] h-[110px]">
      <img
          :src="brandingStore.value.images?.logo ?? '/images/placeholders/profile.png'"
          :alt="t('logoAlt')"
          width="110px"
          height="110px"
          class="rounded-full"
      />
    </div>

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

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"
  },
  "es": {
    "logoAlt": "Logo del creador",
    "editLogo": "Editar logo"
  }
}
</i18n>