﻿<script setup>
import {computed} from "vue";
import {useI18n} from "vue-i18n";
import {useAuthStore} from "@/stores/authStore.js";
import {useCreatorProfileStore} from "@/stores/creatorProfileStore.js";
import {useUserProfileStore} from "@/stores/userProfileStore.js";

const {locale} = useI18n();
const translations = {
  en: {
    myPage: "my page",
    myProfile: "my profile",
    reduce: "collapse",
    signIn: "login",
    signOut: "sign out"
  },
  fr: {
    myPage: "ma page",
    myProfile: "mon profil",
    reduce: "réduire",
    signIn: "connexion",
    signOut: "se déconnecter"
  }
};
const t = computed(() => translations[locale.value] || translations["en"]);

const userProfileStore = useUserProfileStore();
const creatorProfileStore = useCreatorProfileStore();
const authStore = useAuthStore();

function toggleLanguage() {
  locale.value = locale.value === 'fr' ? 'en' : 'fr';
}
</script>

<template>
  <nav class="fixed flex flex-col h-full bg-hBackground border-r border-hOnBackground max-w-64 px-4">
    <div class="mt-4 px-4">
      <router-link to="/@hutopy">
        <img src="/medias/hutopy.png" alt="hutopy logo" width="300" height="64">
      </router-link>
    </div>

    <div class="flex-grow"></div>

    <div class="px-4">
      <div class="flex items-center justify-start p-2 mb-4">
        <img :src="userProfileStore.portraitUrl" alt="Profile Image" referrerpolicy="no-referrer" class="rounded-full"
             width="42" height="42" style="max-height: 42px;">
        <span class="ml-2 text-lg font-sans capitalize text-hOnBackground">{{ userProfileStore.alias }}</span>
      </div>

      <div class="flex flex-col gap-4 mb-4">
        <div v-if="authStore.isAuthenticated">
          <router-link v-if="creatorProfileStore.hasCreator" :to="`/@${creatorProfileStore.creator.name}`">
            <button class="action">
              <i class="mdi mdi-file-account-outline"></i> {{ t.myPage }}
            </button>
          </router-link>
          <router-link v-else to="/create-creator">
            <button class="action">
              <i class="mdi mdi-file-account-outline"></i> {{ t.myPage }}
            </button>
          </router-link>
        </div>

        <div v-if="authStore.isAuthenticated">
          <router-link to="/profile">
            <button class="action">
              <i class="mdi mdi-account"></i> {{ t.myProfile }}
            </button>
          </router-link>
        </div>

        <button class="action"
                @click="toggleLanguage">
          <i class="mdi mdi-translate-variant"></i> {{ locale }}
        </button>

        <div v-if="!authStore.isAuthenticated">
          <router-link to="/login">
            <button class="action">
              <i class="mdi mdi-login"></i> {{ t.signIn }}
            </button>
          </router-link>
        </div>
        <div v-else>
          <button @click="authStore.logout"
                  class="action">
            <i class="mdi mdi-logout"></i> {{ t.signOut }}
          </button>
        </div>
      </div>
    </div>
  </nav>
</template>

<style scoped>
 .action
 {
   @apply capitalize w-full flex items-center gap-2 px-4 py-2 bg-hSecondary text-hOnSecondary rounded;
 }

</style>