<script setup>
import { useGlobalStore } from "@/store/GlobalStore";
import { useI18n } from "vue-i18n";
import { useRouter } from "vue-router";

const globalStore = useGlobalStore();
const { locale } = useI18n();
const router = useRouter();

function changeCurrentLocale(newLocale) {
  locale.value = newLocale;
  globalStore.changeCurrentLocale(newLocale);
  router.go();
}
</script>

<template>
  <v-menu offset-y bottom close-on-click>
    <template v-slot:activator="{ props }">
      <button>
        <v-row
          style="max-width: 150px"
          class="text-white font-weight-light link"
          v-bind="props"
          align="center"
        >
          <v-col cols="8" class="text-subtitle-2" style="color: #2e3947"
            >{{ globalStore.getCurrentLocale == "ar" ? "العربية" : "English" }}
          </v-col>
          <v-col cols="2">
            <v-icon
              color="#2E3947
"
              >mdi-web</v-icon
            >
          </v-col>
        </v-row>
      </button>
    </template>

    <v-list class="bg-light text-darkSecondary rounded-xl">
      <v-list-item link @click="changeCurrentLocale('en')">
        <v-list-item-title>
          <v-row align="center">
            <v-col cols="3">
              <v-img
                src="@/assets/flags/usa.svg"
                class="mx-2 rounded-xl"
                width="30"
              ></v-img>
            </v-col>
            <v-col cols="9" class="text-subtitle-2"> English </v-col>
          </v-row>
        </v-list-item-title>
      </v-list-item>
      <v-list-item link @click="changeCurrentLocale('ar')">
        <v-list-item-title>
          <v-row align="center">
            <v-col cols="3">
              <v-img
                src="@/assets/flags/uae.svg"
                class="mx-2 rounded-xl"
                width="30"
              ></v-img>
            </v-col>
            <v-col cols="9" class="text-subtitle-2">
              Arabic (اللغة العربية)
            </v-col>
          </v-row>
        </v-list-item-title>
      </v-list-item>
    </v-list>
  </v-menu>
</template>
