﻿<script setup>
import SubscriptionList from "@/views/creators/SubscriptionList.vue";
import {useAuthStore} from "@/stores/authStore.js";
import {useRouter} from 'vue-router';
import {ref} from "vue";
import {useI18n} from 'vue-i18n';

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

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);
}

const authStore = useAuthStore();

initializeLocale();
</script>

<template>
  <nav class="flex flex-col h-full overflow-y-auto custom-scrollbar bg-white">
   
    <div class="flex justify-center py-3">
   
   
      <v-btn
          variant="text"
          class="p-0 mx-0 min-w-0"
          @click="toggleLanguage"
      >
        {{ selectedLanguage === 'fr' ? 'Fr' : 'En' }}
      </v-btn>
    </div>
    <div class="border border-solid border-1"></div>


    <div v-if="authStore.isAuthenticated" class="flex-grow px-5 py-4">
      <div class="font-bold"> {{ $t('sidebar.subscriptionTitle') }}</div>
      <div v-if="authStore.isAuthenticated" class="flex-grow px-5">
      </div>

      <subscription-list>
      </subscription-list>
    </div>

    <div v-else class="flex-grow px-5 py-4 flex justify-center font-bold ">
      <span>Connectez-vous</span>
    </div>

  </nav>
</template>


<style scoped>
nav {
  overflow-y: auto;
  min-height: 0;
}

/* Firefox */
.custom-scrollbar {
  scrollbar-width: thin;
  scrollbar-color: #903175 #f1f1f1;
}

/* Chrome, Safari) */
.custom-scrollbar::-webkit-scrollbar {
  width: 8px;
}

.custom-scrollbar::-webkit-scrollbar-track {
  background: #f1f1f1;
}

.custom-scrollbar::-webkit-scrollbar-thumb {
  background-color: #903175;
  border-radius: 10px;
  border: 2px solid #f1f1f1;
}

h2 {
  @apply font-sans font-bold ml-2;
}

aside {
  @apply relative;
}
</style>

