﻿<script setup>
import XIcon from '@/assets/icons/x.svg';
import {useCreatorProfileStore} from '@/stores/creatorProfileStore.js';
import ChangeStripeID from '@/views/profile/creators/ChangeStripeID.vue';
import ChangeTitle from '@/views/profile/creators/ChangeTitle.vue';
import {ref} from 'vue';
import LogoPicker from '../creators/CreatorLogoEditor.vue';
import Socials from './creators/Socials.vue';

const creatorProfileStore = useCreatorProfileStore();

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

const componentsMap = {
  LogoPicker,
  Socials,
  ChangeTitle,
  ChangeStripeID,
};

function requestCancel() {
  currentComponent.value = null;
  dialog.value = false;
}

const openDialog = (component) => {
  currentComponent.value = componentsMap[component];
  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="creatorProfileStore.creator"
            @closeRequested="closeDialog"
            @requestAccept="requestAccept"
            @requestCancel="requestCancel"
        ></component>
      </v-card-text>
    </v-card>
  </v-dialog>

  <!--  Lorsque l'utilisateur n'a pas de creator name-->
  <v-card rounded="xl" class="w-full">
    <h1 class="uppercase">
      {{ $t('creatorinfopage.informations') }}
    </h1>

    <!-- INFOS -->
    <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">
          {{ $t('creatorinfopage.name') }}
        </span>

        <span class="flex-auto text-left pr-6 capitalize">
          {{ creatorProfileStore.creator.name }}
        </span>

        <span class="flex-none">
          <v-icon>mdi-chevron-right</v-icon>
        </span>

      </button>
    </div>

    <!-- TITLE -->
    <div class="flex flex-col w-full">
      <button
          @click="openDialog('ChangeTitle')"
          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">{{
                $t('creatorinfopage.title')
              }}</span>
        <span class="flex-auto text-left pr-6 capitalize">`{{
            creatorProfileStore.creator.title
          }}</span>
        <span class="flex-none">
              <v-icon>mdi-chevron-right</v-icon>
            </span>
      </button>
    </div>

    <!-- STRIPE -->
    <div class="flex flex-col w-full">
      <button
          @click="openDialog('ChangeStripeID')"
          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"
      >
            <span class="flex-none pa-2 min-w-32 text-left"
            >Stripe Account ID</span
            >
        <span class="flex-auto text-left pr-6">{{
            creatorProfileStore.creator.stripeId
          }}</span>

        <span class="flex-none">
              <v-icon>mdi-chevron-right</v-icon>
            </span>
      </button>
    </div>

  </v-card>

  <v-card rounded="xl" class="w-full">
    <div class="uppercase">
      {{ $t('creatorinfopage.socialnetwork') }}
    </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">
          {{ creatorProfileStore.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">{{
            creatorProfileStore.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 w-9 h-9 text-left ml-0.5">
              <XIcon></XIcon>
            </span>
        <span class="flex-auto text-left pr-6">{{
            creatorProfileStore.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">{{
            creatorProfileStore.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">
              <XIcon class="w-5 h-5"></XIcon>
            </span>
        <span class="flex-auto text-left pr-6">{{
            creatorProfileStore.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">{{
            creatorProfileStore.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">{{
            creatorProfileStore.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"
      >
            <span class="pa-2 min-w-32 text-left"
            ><v-icon>mdi-web</v-icon></span
            >
        <span class="flex-auto text-left pr-6">{{
            creatorProfileStore.creator.socials?.websiteUrl
          }}</span>
        <span class="flex-none">
              <v-icon>mdi-chevron-right</v-icon>
            </span>
      </button>
    </div>
  </v-card>

</template>

<style>
.HoverBtn:hover {
  @apply bg-[#A6147D] text-white;
  @apply hover:opacity-90;
}
</style>
