﻿<script setup>
import {ref, markRaw} from 'vue';
import {useCreatorProfileStore} from '@/stores/creatorProfileStore.js';
import {useUserProfileStore} from "@/stores/userProfileStore.js";
import SocialsDialog from './creators/SocialsDialog.vue';
import AliasDialog from "@/views/profile/account/AliasDialog.vue";
import FullnameDialog from "@/views/profile/account/FullnameDialog.vue";
import EmailDialog from "@/views/profile/account/EmailDialog.vue";
import ChangeStripeIdDialog from '@/views/profile/creators/ChangeStripeIdDialog.vue';
import ChangeNameDialog from '@/views/profile/creators/ChangeNameDialog.vue';
import ChangeSlugDialog from '@/views/profile/creators/ChangeSlugDialog.vue';
import ChangeTitleDialog from '@/views/profile/creators/ChangeTitleDialog.vue';
import Youtube from "@/views/svg/Youtube.vue";
import Web from "@/views/svg/Web.vue";
import Reddit from "@/views/svg/Reddit.vue";
import X from "@/views/svg/X.vue";
import Linkedin from "@/views/svg/Linkedin.vue";
import Tiktok from "@/views/svg/Tiktok.vue";
import Instagram from "@/views/svg/Instagram.vue";
import Facebook from "@/views/svg/Facebook.vue";
import { useI18n } from 'vue-i18n';

const { t } = useI18n();
const userProfileStore = useUserProfileStore()

// ### Fullname
const dialogEditFullnameShown = ref(false)

function openEditFullname() {
  dialogEditFullnameShown.value = true
}

function handleCloseEditFullname() {
  dialogEditFullnameShown.value = false
}

function handleSaveEditFullname(firstname, lastname) {
  userProfileStore.changeFullname(firstname, lastname)
  dialogEditFullnameShown.value = false
}

// ### Alias
const dialogEditAliasShown = ref(false)

function openEditAlias() {
  dialogEditAliasShown.value = true
}

function handleCloseEditAlias() {
  dialogEditAliasShown.value = false
}

function handleSaveEditAlias(alias) {
  userProfileStore.changeAlias(alias)
  dialogEditAliasShown.value = false
}

// ### Email
const dialogEditEmailShown = ref(false)

function openEditEmail() {
  dialogEditEmailShown.value = true
}

function handleCloseEditEmail() {
  dialogEditEmailShown.value = false
}

function handleSaveEditEmail(firstname, lastname) {
  userProfileStore.changeEmail(firstname, lastname)
  dialogEditEmailShown.value = false
}

const creatorProfileStore = useCreatorProfileStore();

const dialogShown = ref(false);
const currentComponent = ref('');
const restoreDialogShown = ref(false);
const deleteDialogShown = ref(false);

const componentsMap = {
  EmailDialog: markRaw(EmailDialog),
  SocialsDialog: markRaw(SocialsDialog),
  ChangeSlugDialog: markRaw(ChangeSlugDialog),
  ChangeNameDialog: markRaw(ChangeNameDialog),
  ChangeTitleDialog: markRaw(ChangeTitleDialog),
  ChangeStripeIdDialog: markRaw(ChangeStripeIdDialog),
};

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

const openDialog = (component) => {
  currentComponent.value = componentsMap[component];
  dialogShown.value = true;
};

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

function handleRestore() {
  creatorProfileStore.restoreCreatorPage();
  restoreDialogShown.value = false;
}

function handleDelete() {
  creatorProfileStore.removeCreatorPage();
  deleteDialogShown.value = false;
}
</script>

<template>

  <div class="min-h-screen w-full">

    <v-dialog v-model="dialogEditFullnameShown">
      <fullname-dialog
          :firstname="userProfileStore.user.firstname"
          :lastname="userProfileStore.user.lastname"
          @close="handleCloseEditFullname"
          @save="handleSaveEditFullname"
      ></fullname-dialog>
    </v-dialog>
    <v-dialog v-model="dialogEditAliasShown">
      <alias-dialog
          :alias="userProfileStore.user.alias"
          @close="handleCloseEditAlias"
          @save="handleSaveEditAlias"
      ></alias-dialog>
    </v-dialog>
    <v-dialog v-model="dialogShown">
      <component
          :is="currentComponent"
          :creator="creatorProfileStore.creator"
          :email="userProfileStore.user.email"
          @closeRequested="closeDialog"
      ></component>
    </v-dialog>
    <v-dialog v-model="restoreDialogShown">
      <div class="card dialog">
        <div class="card-title">{{ t('restoreCreatorPage') }}</div>
        <div class="card-content">
          <p>{{ t('restoreWarning') }}</p>
          <div class="card-actions">
            <button class="secondary" @click="restoreDialogShown = false">
              {{ t('cancel') }}
            </button>
            <button class="primary" @click="handleRestore">
              {{ t('accept') }}
            </button>
          </div>
        </div>
      </div>
    </v-dialog>
    <v-dialog v-model="deleteDialogShown">
      <div class="card dialog">
        <div class="card-title">{{ t('deleteCreatorPage') }}</div>
        <div class="card-content">
          <p>{{ t('deleteWarning') }}</p>
          <div class="card-actions">
            <button class="secondary" @click="deleteDialogShown = false">
              {{ t('cancel') }}
            </button>
            <button class="primary danger-action" @click="handleDelete">
              {{ t('accept') }}
            </button>
          </div>
        </div>
      </div>
    </v-dialog>

    <div class="flex flex-col items-center gap-4 m-4">

      <div class="card">

        <div class="card-title">
          {{ t('personalInfo') }}
        </div>

        <div class="content">
          <button
              class="action"
              @click="openEditFullname">
            <span class="label">{{ t('fullName') }}</span>
            <span class="value">{{ userProfileStore.fullname }}</span>
            <span class="chevron"><v-icon>mdi-chevron-right</v-icon></span>
          </button>

          <button
              class="action"
              @click="openEditAlias">
            <span class="label">{{ t('alias') }}</span>
            <span class="value">{{ userProfileStore.user.alias }}</span>
            <span class="chevron"><v-icon>mdi-chevron-right</v-icon></span>
          </button>
        </div>

      </div>

      <div class="card">

        <div class="card-title">
          {{ t('contactInfo') }}
        </div>

        <div class="content">
          <button class="action" @click="openDialog('EmailDialog')">
            <span class="label">{{ t('email') }}</span>
            <span class="value">{{ userProfileStore.user.email }}</span>
            <span class="chevron"><v-icon>mdi-chevron-right</v-icon></span>
          </button>
        </div>

      </div>

      <template v-if="creatorProfileStore.creator !== undefined">
        <div class="card">
          <div class="card-title">
            {{ t('creatorInfo') }}
          </div>
          <div class="content">

            <!-- NAME -->
            <button class="action"  @click="openDialog('ChangeNameDialog')">
              <span class="label">{{ t('name') }}</span>
              <span class="value">{{ creatorProfileStore.creator.name }}</span>
              <span class="chevron"><v-icon>mdi-chevron-right</v-icon></span>
            </button>
            
            <button class="action" @click="openDialog('ChangeSlugDialog')">
              <span class="label">{{ t('username') }}</span>
              <span class="value">@{{ creatorProfileStore.creator.slug }}</span>
              <span class="chevron"><v-icon>mdi-chevron-right</v-icon></span>
            </button>

            <!-- TITLE -->
            <button class="action" @click="openDialog('ChangeTitleDialog')">
              <span class="label">{{ t('title') }}</span>
              <span class="value">{{ creatorProfileStore.creator.title }}</span>
              <span class="chevron"><v-icon>mdi-chevron-right</v-icon></span>
            </button>

            <!-- STRIPE -->
            <button class="action" @click="openDialog('ChangeStripeIdDialog')">
              <span class="label">{{ t('stripeAccountId') }}</span>
              <span class="value">{{ creatorProfileStore.creator.stripeId }}</span>
              <span class="chevron"><v-icon>mdi-chevron-right</v-icon></span>
            </button>

          </div>
        </div>

        <div class="card">
          <div class="card-title">
            {{ t('socialNetworks') }}
          </div>

          <div>

            <button class="action" @click="openDialog('SocialsDialog')">
              <span class="label">
                <facebook class="social-icon"></facebook>
              </span>
              <span class="value">{{ creatorProfileStore.creator.socials?.facebookUrl }}</span>
              <span class="chevron"><v-icon>mdi-chevron-right</v-icon></span>
            </button>

            <button class="action" @click="openDialog('SocialsDialog')">
              <span class="label">
                <instagram class="social-icon"></instagram>
              </span>
              <span class="value">{{ creatorProfileStore.creator.socials?.instagramUrl }}</span>
              <span class="chevron"><v-icon>mdi-chevron-right</v-icon></span>
            </button>

            <button class="action" @click="openDialog('SocialsDialog')">
              <span class="label">
                <x class="social-icon"></x>
              </span>
              <span class="value">{{ creatorProfileStore.creator.socials?.xUrl }}</span>
              <span class="chevron"><v-icon>mdi-chevron-right</v-icon></span>
            </button>

            <button class="action" @click="openDialog('SocialsDialog')">
              <span class="label">
                <linkedin class="social-icon"></linkedin>
              </span>
              <span class="value">{{ creatorProfileStore.creator.socials?.linkedInUrl }}</span>
              <span class="chevron"><v-icon>mdi-chevron-right</v-icon></span>
            </button>
            
            <button class="action" @click="openDialog('SocialsDialog')">
              <span class="label">
                <tiktok class="social-icon"></tiktok>
              </span>
              <span class="value">{{ creatorProfileStore.creator.socials?.tikTokUrl }}</span>
              <span class="chevron"><v-icon>mdi-chevron-right</v-icon></span>
            </button>

            <button class="action" @click="openDialog('SocialsDialog')">
              <span class="label">
                <youtube class="social-icon"></youtube>
              </span>
              <span class="value">{{ creatorProfileStore.creator.socials?.youtubeUrl }}</span>
              <span class="chevron"><v-icon>mdi-chevron-right</v-icon></span>
            </button>

            <button class="action" @click="openDialog('SocialsDialog')">
              <span class="label">
                <reddit class="social-icon"></reddit>
              </span>
              <span class="value">{{ creatorProfileStore.creator.socials?.redditUrl }}</span>
              <span class="chevron"><v-icon>mdi-chevron-right</v-icon></span>
            </button>

            <button class="action" @click="openDialog('SocialsDialog')">
              <span class="label">
                <web class="social-icon"></web>
              </span>
              <span class="value">{{ creatorProfileStore.creator.socials?.websiteUrl }}</span>
              <span class="chevron"><v-icon>mdi-chevron-right</v-icon></span>
            </button>

          </div>
        </div>

        <div class="card">
          <div class="card-title">{{ t('dangerZone') }}</div>
          <div class="content">
            <p>
              {{ t('dangerZoneWarning') }}
            </p>
            <button v-if="!creatorProfileStore.creator.isDeleted"
                    class="primary danger-action"
                    @click="deleteDialogShown = true">
              {{ t('deleteCreatorPage') }}
            </button>
            <button v-else
                    class="primary safe-action"
                    @click="restoreDialogShown = true">
              {{ t('restoreCreatorPage') }}
            </button>
          </div>
        </div>
      </template>

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

<style scoped>
.card {
  @apply bg-hBackground rounded-lg p-4 w-full max-w-2xl;
}

.card-title {
  @apply text-hOnBackground text-lg font-bold mb-4;
}

.content {
  @apply flex flex-col gap-2;
}

.action {
  @apply flex flex-row items-center justify-between w-full p-2 rounded-lg;
  @apply hover:bg-hSurface;
}

.label {
  @apply text-hOnBackground;
}

.value {
  @apply text-hOnBackground opacity-70;
}

.chevron {
  @apply text-hOnBackground opacity-70;
}

.social-icon {
  @apply fill-current w-6 h-6;
  @apply text-hOnBackground;
}

.danger-action {
  @apply bg-red-800 hover:bg-red-700 active:bg-red-600;
}

.safe-action {
  @apply bg-green-800 hover:bg-green-700 active:bg-green-600;
}
</style>

<i18n>
{
  "en": {
    "personalInfo": "Personal Information",
    "fullName": "Full Name",
    "alias": "Alias",
    "contactInfo": "Contact Information",
    "email": "Email",
    "creatorInfo": "Creator Information",
    "dangerZone": "Danger Zone",
    "dangerZoneWarning": "The actions below can have significant impacts on your creator page. Please proceed with caution.",
    "deleteWarning": "Are you sure you want to delete your creator page? This action cannot be undone.",
    "restoreWarning": "Are you sure you want to restore your creator page? This will make your page visible again.",
    "deleteCreatorPage": "Delete Creator Page",
    "restoreCreatorPage": "Restore Creator Page"
  },
  "fr": {
    "personalInfo": "Informations Personnelles",
    "fullName": "Nom Complet",
    "alias": "Alias",
    "contactInfo": "Informations de Contact",
    "email": "Email",
    "creatorInfo": "Informations du Créateur",
    "dangerZone": "Zone de Danger",
    "dangerZoneWarning": "Les actions ci-dessous peuvent avoir des impacts significatifs sur votre page de créateur. Veuillez procéder avec précaution.",
    "deleteWarning": "Êtes-vous sûr de vouloir supprimer votre page de créateur ? Cette action est irréversible.",
    "restoreWarning": "Êtes-vous sûr de vouloir restaurer votre page de créateur ? Cela rendra votre page à nouveau visible.",
    "deleteCreatorPage": "Supprimer la Page Créateur",
    "restoreCreatorPage": "Restaurer la Page Créateur"
  },
  "es": {
    "personalInfo": "Información Personal",
    "fullName": "Nombre Completo",
    "alias": "Alias",
    "contactInfo": "Información de Contacto",
    "email": "Correo Electrónico",
    "creatorInfo": "Información del Creador",
    "dangerZone": "Zona de Peligro",
    "dangerZoneWarning": "Las acciones a continuación pueden tener impactos significativos en tu página de creador. Por favor, procede con precaución.",
    "deleteWarning": "¿Estás seguro de que quieres eliminar tu página de creador? Esta acción no se puede deshacer.",
    "restoreWarning": "¿Estás seguro de que quieres restaurar tu página de creador? Esto hará que tu página sea visible nuevamente.",
    "deleteCreatorPage": "Eliminar Página de Creador",
    "restoreCreatorPage": "Restaurar Página de Creador"
  }
}
</i18n>