<template>
  <div class="switcher" ref="switcherRef">
    <div
        @click="setSwitcherVisible(!isSwitcherVisible)"
        class="switcher__button"
        :class="[{ active: isSwitcherVisible }]"
    >
      <client-only>
<!--        <icon name="fluent:globe-20-filled" size="20" />-->
        <nuxt-img
            format="webp"
            densities="x1"
            v-if="currentLocale"
            :src="currentLocale.flag"
            :alt="currentLocale.code"
        />
<!--        <skeletons-ui-language-switcher v-else />-->
        <template #fallback>
<!--          <skeletons-ui-language-switcher />-->
        </template>
      </client-only>
    </div>
    <client-only>
      <div
          class="switcher__menu"
          :class="[{active: isSwitcherVisible}]"
      >
        <div class="switcher__menu-wrapper">
          <nuxt-img
              class="switcher__menu-button"
              v-for="locale of locales"
              :key="locale.code"
              format="webp"
              densities="x1"
              @click="uiSwitchLanguage(locale.code)"
              :src="locale.flag"
              :alt="locale.code"
          />
        </div>
      </div>
    </client-only>
  </div>
</template>

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

const languageStore = useLanguageStore();

const locales = computed(() => languageStore.languages);
const currentLocale = computed(() => languageStore.currentLocale);

const isSwitcherVisible = ref<boolean>(false);
const setSwitcherVisible = (state: boolean) => {
  isSwitcherVisible.value = state;
};

const switcherRef = ref(null);
onClickOutside(switcherRef, () => isSwitcherVisible.value = false);

const { switchLanguage } = useLanguageSwitch();

const uiSwitchLanguage = (localeCode: string) => {
  switchLanguage(localeCode);
  setSwitcherVisible(false);
};
</script>

<style lang="scss" scoped>
.switcher {
  position: relative;
  z-index: 1;
  width: 44px;
  flex-shrink: 0;

  &__button {
    width: 100%;
    cursor: pointer;
    display: flex;
    gap: 5px;
    padding: 5px;
    border-radius: $default_border_radius;
    transition: 0.2s;

    @include hover {
      background-color: rgba(0, 0, 0, 0.2);
    }

    &.active {
      background-color: rgba(0, 0, 0, 0.2);
    }

    & img {
      width: 100%;
    }
  }

  &__menu {
    position: absolute;
    z-index: 3;
    top: 110%;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    overflow: hidden;
    border-radius: $default_border_radius;
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 0.2s ease;

    &-wrapper {
      display: flex;
      flex-direction: column;
    }

    &.active {
      grid-template-rows: 1fr;
    }

    & > * {
      min-height: 0;
    }

    &-button {
      width: 100%;
      cursor: pointer;
      padding: 3px 5px;
      background-color: #cccccc;
      transition: 0.1s;

      &:first-child {
        padding-top: 5px;
      }
      &:last-child {
        padding-bottom: 5px;
      }

      @include hover {
        background-color: #b2b2b2;
      }
    }
  }
}
</style>