<script setup lang="ts">
import { onClickOutside } from "@vueuse/core";
const langSwitcher = ref<HTMLDivElement | null>(null)

const switchLocalePath = useSwitchLocalePath()
const { locale, locales } = useI18n()
const availableLocales = computed(() => {
  return (locales.value).filter(i => i.code !== locale.value)
})

const isOpen = ref(false)

onClickOutside(langSwitcher,() => {
  isOpen.value = false
})

const { t } = useI18n()

</script>

<template>
  <div
    ref="langSwitcher"
    class="relative"
  >

    <button
      class="text-xs font-semibold py-1 px-2 bg-gray-100 dark:bg-gray-200/5 rounded"
      @click="isOpen = true"
    >
      {{ t(`lang.${locale}.short`) }}
    </button>
    <div
      v-show="isOpen"
      :class="['absolute z-20 bg-white shadow rounded-md p-2 right-0 lg:right-auto lg:left-0 left-auto flex flex-col dark:bg-gray-900']"
    >
      <nuxt-link
        v-for="loc in locales"
        :class="[
          'text-sm cursor-pointer px-4 py-2.5 flex justify-between',
          {'text-primary bg-deepblue-500/5': locale === loc.code}
        ]"
        :to="switchLocalePath(loc?.code || loc)"
        @click="isOpen=false"
      >
        {{ t(`lang.${loc?.code || loc}.long`) }}
      </nuxt-link>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.shadow {
  box-shadow: 0 1px 8px 0 #8B929C4D;
}
</style>
