<template>
  <div class="dropdown select-language-dropdown">
    <a
      v-if="selectedLang?.length"
      :title="$t(selectedLang)"
      class="nav-link"
      :class="$attrs.toggleClass"
      href="#"
      role="button"
      data-toggle="dropdown"
      aria-haspopup="true"
      aria-expanded="false"
      data-bs-toggle="dropdown"
      
    >
      <!-- <svg class="icon icon-Component-240--1"><use xlink:href="#icon-Component-240--1"></use></svg> -->
      <span> {{ $t(selectedLang) }} </span>
    </a>

    <div
      class="dropdown-menu text-right"
      aria-labelledby="selected-language-dropdown"
    >
      <button
        :title="$t('Fa')"
        class="dropdown-item"
        type="button"
        @click.prevent="changeLanguage('fa')"
      >
        {{ $t("Fa") }}
      </button>
      <button
        :title="$t('En')"
        class="dropdown-item"
        type="button"
        @click.prevent="changeLanguage('en')"
      >
        {{ $t("En") }}
      </button>
      <button
        :title="$t('Ar')"
        class="dropdown-item"
        type="button"
        @click.prevent="changeLanguage('ar')"
      >
        {{ $t("Ar") }}
      </button>
    </div>
  </div>
</template>

<script>
import { mapActions, mapState } from "pinia";
import { useCommonStore } from "~/stores/commonStore";
import { useAuthStore } from "~/stores/authStore";

// import i18next from "i18next";
// import I18NextVue from "i18next-vue";

export default {
  data() {
    return {
      selectedLang: "",
    };
  },
  mounted() {
    this.selectedLang = this.upperCaseFirstLetter(this.langGetter ?? "fa");

    this.langSetter(this.langGetter ?? "fa");
    // i18next.changeLanguage(this.langGetter ?? "fa");

    // i18next.changeLanguage("de", (err, t) => {
    //   if (err) return console.log("Something went wrong loading", err);
    //   t("key"); // Use the translation function
    // });
  },
  computed: {
    ...mapState(useCommonStore, ["langGetter"]),
  },
  methods: {
    ...mapActions(useCommonStore, ["langSetter"]),
    changeLanguage(selectedLang) {
      const { setLocale } = useI18n()
      const dir = selectedLang == "en" ? "ltr" : "rtl";

      document.getElementsByTagName("html")[0].dir = dir;
      document.getElementsByTagName("html")[0].lang = selectedLang;

      this.selectedLang = this.upperCaseFirstLetter(selectedLang);
      this.langSetter(selectedLang);
      setLocale(selectedLang)
      // i18next.changeLanguage(selectedLang);
    },
    upperCaseFirstLetter(selectedLang) {
      return selectedLang.charAt(0).toUpperCase() + selectedLang.slice(1);
    },
  },
};
</script>

<style scoped lang="scss"></style>