﻿<script setup>
import SubscriptionList from "@/views/creators/SubscriptionList.vue";
import { useAuthStore } from "@/stores/authStore.js";
import { useRouter } from 'vue-router';
import { computed, ref } from "vue";
import { useI18n } from 'vue-i18n';
import { useCreatorProfileStore } from "@/stores/creatorProfileStore.js";
import {useUserProfileStore} from "@/stores/userProfileStore.js";
import {useSideBarStore} from "@/stores/sideBarStore.js"; 

const {locale} = useI18n();
const router = useRouter();
const selectedLanguage = ref(locale.value);

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

const creatorIsCurrentUser = computed(() => authStore.isAuthenticated && authStore.userId);

const createHtmlContent = () => {
  router.push('/content/editor');
};

function initializeLocale() {
  const preferredLocale = localStorage.getItem('preferredLocale');
  selectedLanguage.value = preferredLocale === null ? locale.value : preferredLocale;
  locale.value = selectedLanguage.value;
}

function toggleLanguage() {
  const lang = selectedLanguage.value === 'fr' ? 'en' : 'fr';
  locale.value = lang;
  selectedLanguage.value = lang;
  localStorage.setItem('preferredLocale', lang);
}

function toggleMenu() {
  sideBarStore.toggle(); 
}

initializeLocale();
</script>

<template>
  <nav :class="['fixed flex flex-col h-full bg-white border-r border-gray-300', sideBarStore.isOpen ? 'max-w-64 px-4' : 'max-w-[82px] px-2']">
    <!-- LOGO HUTOPY -->
    <div class="mt-4" :class="sideBarStore.isOpen ? 'px-4' : 'px-2'">
      <router-link to="/@hutopy">
        <img v-if="sideBarStore.isOpen"
             src="/images/hutopymedia/banners/hutopy.png"
             alt="hutopy"
             width="300px"
             height="64px">
        <img v-else
             src="/images/usersmedia/HutopyProfile/profilepictures/profileHutopyProfile01.png"
             alt="hutopy"
             width="42px"
             height="42px">
      </router-link>
    </div>

    
<!--    <div class="flex-grow mt-4" :class="sideBarStore.isOpen ? 'px-4' : 'px-2'">-->
<!--      <template v-if="authStore.isAuthenticated">  -->
<!--        <div class="font-bold" :class="{ 'text-center': !sideBarStore.isOpen }">-->
<!--          <span v-if="sideBarStore.isOpen">{{ $t('sidebar.subscriptionTitle') }}</span>-->
<!--          <span v-else>A</span>-->
<!--        </div>-->
<!--        <div-->
<!--            class="border-b border-gray-300 my-4 mx-auto"-->
<!--            :class="sideBarStore.isOpen ? 'w-48' : 'w-16'"-->
<!--        ></div>-->
<!--        <subscription-list v-if="sideBarStore.isOpen"></subscription-list>-->
<!--      </template>-->
<!--    </div>-->

    <div
        class="border-b border-gray-300 my-4 mx-auto"
        :class="sideBarStore.isOpen ? 'w-48' : 'w-16'"
    ></div>

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

    <!-- SECTION UTILISATEUR -->
    <div :class="sideBarStore.isOpen ? 'px-4' : 'px-2'">
      <div class="flex items-center justify-start p-2 mb-4" :class="!sideBarStore.isOpen ? 'my-2' : ''">       
        <img
            :src="userProfileStore.portraitUrl"
            alt="Profile Image"
            referrerpolicy="no-referrer"
            class="rounded-full"
            width="42"
            height="42"
            style="max-height: 42px;">
        <span v-if="sideBarStore.isOpen" class="ml-2 text-sm font-sans capitalize">
          {{ userProfileStore.alias }}
        </span>
      </div>

      <div class="flex flex-col gap-4 mb-4">
<!--        <router-link v-if="creatorProfileStore.hasCreator" :to="`/content/editor`">-->
<!--          <v-btn class="w-full justify-start" prepend-icon="mdi-pencil" variant="flat" :class="!sideBarStore.isOpen ? 'my-2' : ''">-->
<!--            <span v-if="sideBarStore.isOpen">Éditeur</span>-->
<!--          </v-btn>-->
<!--        </router-link>-->

        <router-link v-if="creatorProfileStore.hasCreator" :to="`/@${creatorProfileStore.creator.name}`">
          <v-btn class="w-full justify-start" prepend-icon="mdi-file-account-outline" variant="flat" :class="!sideBarStore.isOpen ? 'my-2' : ''">
            <span v-if="sideBarStore.isOpen">{{ creatorProfileStore.creator.name }}</span>
          </v-btn>
        </router-link>

        <v-btn v-else-if="authStore.isAuthenticated" to="/create-creator" variant="flat" class="w-full justify-start" prepend-icon="mdi-file-account-outline" :class="!sideBarStore.isOpen ? 'my-2' : ''">
          <span v-if="sideBarStore.isOpen">Ma page</span>
        </v-btn>

        <div v-if="authStore.isAuthenticated">
          <v-btn to="/profile" class="w-full justify-start" prepend-icon="mdi-account" variant="flat" :class="!sideBarStore.isOpen ? 'my-2' : ''">
            <span v-if="sideBarStore.isOpen">{{ $t('header.myprofile') }}</span>
          </v-btn>
        </div>

        <v-btn variant="flat" class="w-full justify-start" prepend-icon="mdi-translate-variant" @click="toggleLanguage" :class="!sideBarStore.isOpen ? 'my-2' : ''">
          <span v-if="sideBarStore.isOpen">{{ $t('language.language') }}</span>
        </v-btn>



        <v-btn
            @click="toggleMenu"
            variant="flat"
            class="w-full justify-start"
            :prepend-icon="sideBarStore.isOpen ? 'mdi-arrow-collapse-left' : 'mdi-arrow-collapse-right'"
            :class="!sideBarStore.isOpen ? 'my-2' : ''"
        >
          <span v-if="sideBarStore.isOpen">{{ $t('sidebar.Reduce') }}</span>
        </v-btn>

        <div v-if="!authStore.isAuthenticated">
          <v-btn to="/login" variant="flat" class="justify-start" prepend-icon="mdi-login" :class="!sideBarStore.isOpen ? 'my-2' : ''">
            <span v-if="sideBarStore.isOpen">{{ $t('sidebar.connection') }}</span>
          </v-btn>
        </div>
        <div v-else>
          <v-btn @click="authStore.logout"  variant="flat" class="justify-start" prepend-icon="mdi-logout" :class="!sideBarStore.isOpen ? 'my-2' : ''">
            <span v-if="sideBarStore.isOpen">{{ $t('header.Signout') }}</span>
          </v-btn>
        </div>
      </div>
    </div>
  </nav>
</template>



