<template>
  <div
    ref="menuRef"
    class="layout-footer-language"
  >
    <button
      class="layout-footer-language__button"
      type="button"
      @click="handler"
    >
      <img
        :src="`/icons/flags/${locale}.svg`"
        :alt="locale"
        class="layout-language__item-icon"
        width="20"
        height="16"
      >
      {{ localeName }}
      <UiIcon
        class="layout-footer-language__angle"
        name="angle-down"
        size="12"
      />
    </button>
    <div
      v-if="isMenuShow"
      class="layout-footer-language__menu"
    >
      <a
        v-for="(item, index) in enabledLocales"
        :key="`header-language-${index}`"
        :class="{'--active': locale === item.code}"
        :href="switchLocalePath(item.code)"
        :hreflang="item.value as string"
        :lang="item.language"
        class="layout-footer-language__menu-item"
        @click.prevent="handleSwitch(item.code)"
      >
        <img
          :src="`/icons/flags/${item.code}.svg`"
          :alt="item.code"
          class="layout-footer-language__icon"
          width="20"
          height="16"
        >
        {{ item.name }}
      </a>
    </div>
  </div>
</template>

<script setup lang="ts">
import { onClickOutside } from '@vueuse/core';

const { locale, locales, setLocale } = useI18n();
const switchLocalePath = useSwitchLocalePath();

const menuRef = ref();
const isMenuShow = ref(false);

onClickOutside(menuRef, () => {
  isMenuShow.value = false;
});

function handler() {
  isMenuShow.value = !isMenuShow.value;
}

const enabledLocales = useEnabledLocales();

const localeName = computed(() => locales.value.find(item => item.code === locale.value)?.name || 'English');

const handleSwitch = (newLocale: string) => {
  const code = newLocale as Parameters<typeof setLocale>[0];
  isMenuShow.value = false;
  setLocale(code);
  setTimeout(() => window.location.href = switchLocalePath(code), 100);
};
</script>

<style lang="scss">
.layout-footer-language {
  position: relative;
}

.layout-footer-language__button {
  @include font-sm;

  display: flex;
  column-gap: 8px;
  align-items: center;
  flex-wrap: nowrap;
  padding: 6px 12px;
  border-radius: $radius;
  background-color: $footer-language-bg;
  color: $footer-language-text;

  @include hover(background-color) {
    background-color: $footer-language-bg--hover;
  }
}

.layout-footer-language__menu {
  position: absolute;
  top: -8px;
  left: 50%;
  z-index: $z-index-tooltip;
  transform: translate(-50%, -100%);
  border-radius: $radius;
  width: 192px;
  border: 1px solid $footer-language-menu-border;
  background-color: $footer-language-menu-bg;
  overflow: hidden;
}

.layout-footer-language__menu-item {
  @include font-sm;

  display: flex;
  flex-wrap: nowrap;
  gap: 12px;
  align-items: center;
  color: $footer-language-item-text;
  padding: 10px 16px;
}

.layout-footer-language__menu-item.--active {
  background-color: $footer-language-item-bg--active;
  color: $footer-language-item-text--active;
}
</style>
