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

    <img
        class="shadow-2xl rounded-full border-solid border-hSecondary border-102 max-w-[190px]"
        :src="brandingStore.value.images?.logo ?? '/images/placeholders/profile.png'"
        alt="Profile Picture"
        :style="{
            height: '190px'
        }"
    />

    <!-- Tint Effect -->
    <div
        v-if="showTint"
        class="absolute rounded-full inset-0 bg-black/25 cursor-pointer"
    >
      <!-- Top-right Icon -->
      <div
          class="absolute top-4 right-4 w-12 h-12 bg-white 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 }">
      <div class="bg-white rounded-2xl p-4">
        <creator-logo-editor
            :creator="brandingStore?.value"
            @closeRequested="() => isDialogOpen = false"
        ></creator-logo-editor>
      </div>
    </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";

const authStore = useAuthStore();
const brandingStore = useBrandingStore();

// 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>