<template>
 <!--begin::Toolbar wrapper-->
 <div class="d-flex align-items-stretch flex-shrink-0">
 <!--begin::Notifications-->
 <div class="d-flex align-items-center ms-1 ms-lg-3"></div>
 <!--end::Notifications-->

 <!--begin::User-->
 <div
 class="dropdown d-flex align-items-center ms-1 ms-lg-3"
 id = "kt_header_user_menu_toggle"
 >
 <!--begin::Menu-->
 <div
 class="cursor-pointer symbol symbol-30px symbol-md-40px"
 data-kt-menu-trigger="click"
 data-kt-menu-attach="parent"
 data-kt-menu-placement="bottom-end"
 data-kt-menu-flip="bottom"
 >
 <img :src="user.avatar" alt="metronic" />
 </div>
 <KTUserMenu></KTUserMenu>
 <!--end::Menu-->
 </div>
 <!--end::User -->
 </div>
 <!--end::Toolbar wrapper-->
</template>

<script lang="ts">
import { defineComponent, onMounted, nextTick } from "vue";
import KTUserMenu from "@/layout/header/partials/UserMenu.vue";
import { useAuthStore } from "@/store/AuthStore";
import { storeToRefs } from "pinia";
import { MenuComponent } from "@/assets/ts/components";

export default defineComponent({
 name: "header-topbar",
 components: {
 KTUserMenu,
 },
 setup() {
 const authStore = useAuthStore();

 const { user } = storeToRefs(authStore);


onMounted(() => {
 nextTick(() => {
 const toolbarElement = document.getElementById(
 "user_menu"
 ) as HTMLInputElement;
 MenuComponent?.reinitialization();
 const toolbar = MenuComponent?.getInstance(toolbarElement);
 toolbar.on("kt.menu.dropdown.show", function () {
 console.log("open");
 });
 toolbar.on("kt.menu.dropdown.hide", function () {
 console.log("close");
 });
 });
 });

 return { user };
 },
});
</script>

<template>
 <!--begin::Menu-->
 <div
 class="menu menu-sub menu-sub-dropdown menu-column menu-rounded menu-gray-600 menu-state-bg-light-primary fw-bold py-4 fs-6 min-w-275px w-auto"
 data-kt-menu="true"
 id = "user_menu"
 >
 <!--begin::Menu item-->
 <div class="menu-item px-3">
 <div class="menu-content d-flex align-items-center px-3">
 <!--begin::Avatar-->
 <div class="symbol symbol-50px me-5">
 <img alt="Logo" :src="user.avatar" />
 </div>
 <!--end::Avatar-->

 <!--begin::Username-->
 <div class="d-flex flex-column">
 <div class="fw-bolder d-flex align-items-center fs-5">
 {{ user.first_name }} {{ user.last_name }}
 </div>
 <span class="fw-bold text-muted text-hover-primary fs-7"
 >{{ user.email }}
 </span>
 </div>
 <!--end::Username-->
 </div>
 </div>
 <!--end::Menu item-->

 <!--begin::Menu separator-->
 <div class="separator my-2"></div>
 <!--end::Menu separator-->

 <!--begin::Menu item-->
 <div class="menu-item px-5">
 <router-link to="/profile-settings" class="menu-link px-5">
 {{ $t("my_profile") }}
 </router-link>
 </div>
 <!--end::Menu item-->

 <!--begin::Menu separator-->
 <div class="separator my-2"></div>
 <!--end::Menu separator-->

 <!--begin::Menu item-->
 <div
 class="menu-item px-5"
 data-kt-menu-trigger="hover"
 data-kt-menu-placement="left-start"
 data-kt-menu-flip="center, top"
 >
 <a class="menu-link px-5">
 <span class="menu-title position-relative">
 {{ $t("language") }}
 <span
 class="fs-8 rounded bg-light px-3 py-2 position-absolute translate-middle-y top-50 end-0"
 >
 {{ language.name }}
 <img
 class="w-15px h-15px rounded-1 ms-2"
 :src="language.flag"
 alt="language"
 />
 </span>
 </span>
 </a>

 <!--begin::Menu separator-->
 <div class="separator my-2"></div>
 <!--end::Menu separator-->

 <!--begin::Menu sub-->
 <div
 class="menu-sub menu-sub-dropdown w-175px py-4"
 >
 <!--begin::Menu item-->
 <div class="menu-item px-3">
 <a
 @click="setLang("en", "English", "media/flags/united-states.svg")"
 class="menu-link d-flex px-5"
 :class="{ active: language.locale === "en" }"
 >
 <span class="symbol symbol-20px me-4">
 <img
 class="rounded-1"
 src="media/flags/united-states.svg"
 alt="en"
 />
 </span>
 {{ $t("english") }}
 </a>
 </div>
 <!--end::Menu item-->

 <!--begin::Menu item-->
 <div class="menu-item px-3">
 <a
 @click="setLang("it", "Italiano", "media/flags/italy.svg")"
 class="menu-link d-flex px-5"
 :class="{ active: language.locale === "it" }"
 >
 <span class="symbol symbol-20px me-4">
 <img class="rounded-1" src="media/flags/italy.svg" alt="it" />
 </span>
 {{ $t("italian") }}
 </a>
 </div>
 <!--end::Menu item-->
 </div>
 <!--end::Menu sub-->
 </div>
 <!--end::Menu item-->

 <!--begin::Menu item-->
 <div class="menu-item px-5">
 <a @click="signOut()" class="menu-link px-5"> {{ $t("sign_out") }} </a>
 </div>
 <!--end::Menu item-->
 </div>
 <!--end::Menu-->
</template>

<script lang="ts">
import { defineComponent } from "vue";
import AuthService from "@/core/services/AuthService";

import { useAuthStore } from "@/store/AuthStore";
import { useLocaleStore } from "@/store/LocaleStore";

import { useRouter } from "vue-router";
import { storeToRefs } from "pinia";
import { useI18n } from "vue-i18n/index";

export default defineComponent({
 name: "kt-user-menu",
 components: {},
 setup() {
 const router = useRouter();

 const signOut = async () => {
 await AuthService.logout();
 router.push({ name: "SignIn" });
 };
 const i18n = useI18n({ useScope: "global" });

 const localeStore = useLocaleStore();

 const { language } = storeToRefs(localeStore);

 const setLang = (locale: string, name: string, flag: string) => {
 const language = { locale, name, flag };
 localeStore.setLanguage(language);

 i18n.locale.value = locale;
 };

 const authStore = useAuthStore();

 const { user } = storeToRefs(authStore);

 return {
 signOut,
 setLang,
 language,
 user,
 };
 },
});
</script>