﻿<script setup>
import {computed, ref} from 'vue'
import {useUserStore} from "@/stores/userStore.js"
import Socials from './Socials.vue'
import BannerPicker from './BannerPicker.vue'
import ColorsPicker from './ColorsPicker.vue'
import LogoPicker from "./LogoPicker.vue"
import About from "./About.vue";
import CreateCreator from "./CreateCreator.vue";
import {useClient} from "@/plugins/api.js";

const userStore = useUserStore()

const colorBannerTop = computed(() => userStore.creator.colors.bannerTop || '#a0c0f0')
const colorBannerBottom = computed(() => userStore.creator.colors.bannerBottom || '#a0c0f0')
const colorAccent = computed(() => userStore.creator.colors.accent || '#a0c0f0')
const colorMenu = computed(() => userStore.creator.colors.menu || '#a0c0f0')
const imageBanner = computed(() => userStore.creator.images.banner || '/images/placeholders/banner.png')
const imageLogo = computed(() => userStore.creator.images.logo || '/images/placeholders/logo.png')

const dialog = ref(false);
const currentComponent = ref('')
const colorToEdit = ref(null)

const componentsMap = {
  BannerPicker,
  LogoPicker,
  Socials,
  ColorsPicker,
  About,
  CreateCreator
};

async function requestAccept(creatorName) {
  const client = useClient()
  const response = await client.post(
      '/api/creators',
      {
        'creatorId': userStore.user.id,
        'name': creatorName
      })
  if (response.status >= 200 && response.status < 300) {
    await userStore.fetchCurrentUserProfile()
    dialog.value = false
  } else {
    console.log(`An issue while creating the creator: ${response.statusText}`)
  }
}

function requestCancel() {
  dialog.value = false
}

const openDialog = (component, colorName = null) => {
  currentComponent.value = componentsMap[component]
  colorToEdit.value = colorName
  dialog.value = true
}

const closeDialog = () => {
  currentComponent.value = null
  dialog.value = false
}

</script>

<template>

  <v-dialog v-model="dialog" max-width="800px">
    <v-card :style="{ borderRadius: '25px', border: '3px solid rgb(159, 76, 173)' }">
      <v-card-text>
        <component :is="currentComponent"
                   :creator="userStore.creator"
                   :colorName="colorToEdit"
                   @closeRequested="closeDialog"
                   @requestAccept="requestAccept"
                   @requestCancel="requestCancel"
        ></component>
      </v-card-text>
    </v-card>
  </v-dialog>

  <!--  Lorsque l'utilisateur n'a pas de creator name-->
  <div class="flex flex-col items-center w-full">
    <h1 class="uppercase pb-5 text-2xl">
      <v-icon class="mr-2">mdi-file-edit-outline</v-icon>
      Informations de votre page
    </h1>

    <div v-if="userStore.hasCreator" class="w-full max-w-[800px]">

      <div class="my-10 border rounded-2xl">

        <div class="py-5 uppercase ml-4">Informations</div>
        <div class="flex flex-col w-full">
          <button

              class="HoverBtn active:bg-gray-300 py-2 px-4 border-gray-400 shadow flex items-center transition duration-200 ease-in-out w-full">
            <span class="flex-none pa-2 min-w-32 text-left">Nom</span>
            <span class="flex-auto text-left pr-6 capitalize">{{ userStore.creator.name }}</span>
            <span class="flex-none">  
            <v-icon>mdi-chevron-right</v-icon>
          </span>
          </button>

          <button
              @click="openDialog('About')"
              class="HoverBtn active:bg-gray-300 py-2 px-4 border-gray-400 shadow flex items-center transition duration-200 ease-in-out w-full">
            <span class="flex-none pa-2 min-w-32 text-left">Titre</span>
            <span class="flex-auto text-left pr-6">{{ userStore.creator.about.title }}</span>
            <span class="flex-none">
            <v-icon>mdi-chevron-right</v-icon>
          </span>
          </button>

          <button
              @click="openDialog('About')"
              class="HoverBtn active:bg-gray-300 py-2 px-4 border-gray-400 shadow flex items-center transition duration-200 ease-in-out w-full rounded-b-2xl  ">
            <span class="pa-2 min-w-32 text-left">Description</span>
            <span class="flex-auto text-left pr-6">{{ userStore.creator.about.description }}</span>
            <span class="flex-none">
            <v-icon>mdi-chevron-right</v-icon>
          </span>
          </button>
        </div>
      </div>

      <div class="border rounded-2xl">
        <div class="py-5 uppercase ml-4">Bannière et image de profil</div>
        <div class="flex flex-col w-full">

          <button
              @click="openDialog('ColorsPicker', 'bannerTop')"
              class="flex justify-end h-10 align-center text-white px-5 hover:brightness-150"
              :style="{ backgroundColor: colorBannerTop }"
          >
            <v-icon>mdi-eyedropper-variant</v-icon>
          </button>

          <button>
            <img
                @click="openDialog('BannerPicker')"
                :src="imageBanner"
                class="w-full transition duration-200 ease-in-out transform hover:brightness-125"
                alt="Tutorial Banner"
            >
          </button>

          <button
              @click="openDialog('ColorsPicker', 'bannerBottom')"
              class="flex justify-end h-10 align-center text-white px-5 hover:brightness-150"
              :style="{ backgroundColor: colorBannerBottom }"
          >
            <v-icon>mdi-eyedropper-variant</v-icon>
          </button>

          <button class="flex justify-center my-5">
            <img
                @click="openDialog('LogoPicker')"
                class="custom-border hover:brightness-125 active:bg-gray-600 shadow flex items-center transition duration-200 ease-in-out w-48 h-48 rounded-full"
                :style="{ borderColor: colorAccent }"
                :src="imageLogo"
                alt="Profile Image"
            >
          </button>

          <button
              @click="openDialog('ColorsPicker', 'accent')"
              class="HoverBtn active:bg-gray-300 py-2 px-4 border-gray-400 shadow flex items-center transition duration-200 ease-in-out w-full">
            <span class="pa-2 min-w-32 text-left"><v-icon>mdi-circle-outline</v-icon></span>
            <span class="flex-auto text-left pr-6">Couleur du contour de la photo de profil.</span>
            <span class="flex-none">
        <v-icon>mdi-eyedropper-variant</v-icon>
          </span>
          </button>

          <button
              @click="openDialog('ColorsPicker', 'menu')"
              class="HoverBtn active:bg-gray-300 py-2 px-4 border-gray-400 shadow flex items-center transition duration-200 ease-in-out w-full rounded-b-2xl">
            <span class="flex-none pa-2 min-w-32 text-left"> <v-icon>mdi-menu</v-icon></span>
            <span class="flex-auto text-left pr-6">Couleur des entêtes de menus</span>
            <span class="flex-none">
           <v-icon>mdi-eyedropper-variant</v-icon>
          </span>
          </button>
        </div>
      </div>

      <div class="mt-10 border rounded-2xl">

        <div class="py-5 uppercase ml-4">Réseaux Sociaux</div>

        <div class="flex flex-col w-full">
          <button
              @click="openDialog('Socials')"
              class="HoverBtn active:bg-gray-300 py-2 px-4 border-gray-400 shadow flex items-center transition duration-200 ease-in-out w-full">
            <span class="pa-2 min-w-32 text-left"><v-icon>mdi-facebook</v-icon></span>
            <span class="flex-auto text-left pr-6">{{ userStore.creator.socials.facebookUrl }}</span>
            <span class="flex-none">
            <v-icon>mdi-chevron-right</v-icon>
          </span>
          </button>

          <button
              @click="openDialog('Socials')"
              class="HoverBtn active:bg-gray-300 py-2 px-4 border-gray-400 shadow flex items-center transition duration-200 ease-in-out w-full">
            <span class="flex-none pa-2 min-w-32 text-left"> <v-icon>mdi-instagram</v-icon></span>
            <span class="flex-auto text-left pr-6">{{ userStore.creator.socials.instagramUrl }}</span>
            <span class="flex-none">
            <v-icon>mdi-chevron-right</v-icon>
          </span>
          </button>

          <button
              @click="openDialog('Socials')"
              class="HoverBtn active:bg-gray-300 py-2 px-4 border-gray-400 shadow flex items-center transition duration-200 ease-in-out w-full">
          <span class="flex-none pa-2 min-w-32 text-left">    <img src="/images/hutopymedia/icons/x.svg" width="23px"
                                                                   height="23px"></span>
            <span class="flex-auto text-left pr-6">{{ userStore.creator.socials.xUrl }}</span>
            <span class="flex-none">          
                        <v-icon>mdi-chevron-right</v-icon>
          </span>
          </button>

          <button
              @click="openDialog('Socials')"
              class="HoverBtn active:bg-gray-300 py-2 px-4 border-gray-400 shadow flex items-center transition duration-200 ease-in-out w-full ">
            <span class="pa-2 min-w-32 text-left"><v-icon>mdi-linkedin</v-icon></span>
            <span class="flex-auto text-left pr-6">{{ userStore.creator.socials.linkedInUrl }}</span>
            <span class="flex-none">
            <v-icon>mdi-chevron-right</v-icon>
          </span>
          </button>

          <button
              @click="openDialog('Socials')"
              class="HoverBtn active:bg-gray-300 py-2 px-4 border-gray-400 shadow flex items-center transition duration-200 ease-in-out w-full ">
          <span class="flex-none pa-2 min-w-32 text-left"> 
            <img src="/images/hutopymedia/icons/tiktok.svg" class="w-5 h-5">
          </span>
            <span class="flex-auto text-left pr-6">{{ userStore.creator.socials.tikTokUrl }}</span>
            <span class="flex-none">
            <v-icon>mdi-chevron-right</v-icon>
          </span>
          </button>

          <button
              @click="openDialog('Socials')"
              class="HoverBtn active:bg-gray-300 py-2 px-4 border-gray-400 shadow flex items-center transition duration-200 ease-in-out w-full ">
            <span class="pa-2 min-w-32 text-left"><v-icon>mdi-youtube</v-icon></span>
            <span class="flex-auto text-left pr-6">{{ userStore.creator.socials.youtubeUrl }}</span>
            <span class="flex-none">
            <v-icon>mdi-chevron-right</v-icon>
          </span>
          </button>

          <button
              @click="openDialog('Socials')"
              class="HoverBtn active:bg-gray-300 py-2 px-4 border-gray-400 shadow flex items-center transition duration-200 ease-in-out w-full ">
            <span class="pa-2 min-w-32 text-left"><v-icon>mdi-reddit</v-icon></span>
            <span class="flex-auto text-left pr-6">{{ userStore.creator.socials.redditUrl }}</span>
            <span class="flex-none">
            <v-icon>mdi-chevron-right</v-icon>
          </span>
          </button>

          <button
              @click="openDialog('Socials')"
              class="HoverBtn active:bg-gray-300 py-2 px-4 border-gray-400 shadow flex items-center transition duration-200 ease-in-out w-full rounded-b-2xl  ">
            <span class="pa-2 min-w-32 text-left"><v-icon>mdi-web</v-icon></span>
            <span class="flex-auto text-left pr-6">{{ userStore.creator.socials.websiteUrl }}</span>
            <span class="flex-none">
            <v-icon>mdi-chevron-right</v-icon>
          </span>
          </button>

        </div>
      </div>
    </div>

    <div v-else class="w-full max-w-[800px]">
      <div class="my-10 border rounded-2xl">

        <div class="py-5 uppercase ml-4 px-4">Informations pour pour votre page</div>
        <div class="flex flex-col w-full">
          <button
              @click="openDialog('CreateCreator')"
              class="HoverBtn active:bg-gray-300 py-2 px-4 border-gray-400 shadow flex items-center transition duration-200 ease-in-out">
            <span class="flex-none pa-2 min-w-32 text-left">Nom  (Unique) </span>
            <span class="flex-auto text-left pr-6">Vous devez vous assurer de choisir un nom unique ou d'utiliser votre propre nom. Cela est important car c'est votre nom de marque, celui que vous allez présenter aux gens. Par exemple, notre projet s'appelle Hutopy, nous avons donc utilisé ce nom pour notre page officielle sur la plateforme.</span>
            <span class="flex-none">  
            <v-icon>mdi-chevron-right</v-icon>
          </span>
          </button>

          <button
              @click="openDialog('CreateCreator')"
              class="HoverBtn active:bg-gray-300 py-2 px-4 border-gray-400 shadow flex items-center transition duration-200 ease-in-out">
            <span class="flex-none pa-2 min-w-32 text-left">Titre</span>
            <span class="flex-auto text-left pr-6">Le titre doit refléter ce que vous souhaitez mettre en avant sur la plateforme, ce que vous voulez présenter comme contenu ou la raison de votre présence sur la plateforme. Par exemple, des artistes pourraient écrire chanteur, danseur, peintre ou autre. Une entreprise pourrait indiquer son activité. Dans notre cas, pour Hutopy, c'est 'Créer un monde meilleur'. </span>
            <span class="flex-none">
            <v-icon>mdi-chevron-right</v-icon>
          </span>
          </button>

          <button
              @click="openDialog('CreateCreator')"
              class="HoverBtn active:bg-gray-300 py-2 px-4 border-gray-400 shadow flex items-center transition duration-200 ease-in-out w-full rounded-b-2xl  ">
            <span class="pa-2 min-w-32 text-left">Description</span>
            <span class="flex-auto text-left pr-6">Pour la description, c'est un espace où vous pouvez écrire ce que vous souhaitez : décrire votre page, le service que vous offrez, la raison de votre présence sur la plateforme, votre historique... Vous choisissez ! Dans notre cas, pour Hutopy, nous sommes ici afin de créer une plateforme sur laquelle les gens pourront s'exprimer et créer, tout en étant respectés et non exploités. </span>
            <span class="flex-none">
            <v-icon>mdi-chevron-right</v-icon>
          </span>
          </button>
        </div>
      </div>

    </div>

  </div>

</template>

<style>

.HoverBtn:hover {
  @apply bg-[#A6147D] text-white;
  @apply hover:opacity-90;
  /* Réduire l'opacité au survol */
}

.custom-border {
  border: 3px solid;
}

</style>


