<template>
  <div class="relative">
    <button 
      @click="toggleDropdown" 
      class="flex items-center text-gray-600 hover:text-gray-900 focus:outline-none"
      aria-expanded="false"
    >
      <span class="sr-only">{{ $t('languages.selectLanguage') }}</span>
      <span class="flag-icon">{{ currentLanguageFlag }}</span>
      <span class="ml-1 text-sm">{{ currentLanguageCode.toUpperCase() }}</span>
      <svg class="ml-1 h-5 w-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
        <path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd" />
      </svg>
    </button>
    
    <div 
      v-if="isOpen" 
      class="origin-top-right absolute right-0 mt-2 w-48 rounded-md shadow-lg bg-white ring-1 ring-black ring-opacity-5 focus:outline-none z-10"
      role="menu" 
      aria-orientation="vertical" 
      aria-labelledby="language-menu"
    >
      <div class="py-1" role="none">
        <button
          v-for="lang in availableLanguages"
          :key="lang.code"
          @click="changeLanguage(lang.code)"
          class="flex items-center w-full text-left px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 hover:text-gray-900"
          role="menuitem"
        >
          <span class="flag-icon mr-2">{{ lang.flag }}</span>
          {{ $t(`languages.${lang.code}`) }}
        </button>
      </div>
    </div>
  </div>
</template>

<script>
import { ref, computed, onMounted, onUnmounted } from 'vue';
import { useI18n } from 'vue-i18n';
import { setLanguage } from '../i18n';

export default {
  name: 'LanguageSelector',
  setup() {
    const { locale } = useI18n();
    const isOpen = ref(false);
    
    const availableLanguages = [
      { code: 'de', flag: '🇩🇪' },
      { code: 'en', flag: '🇬🇧' },
      { code: 'ru', flag: '🇷🇺' }
    ];
    
    const currentLanguageCode = computed(() => locale.value);
    
    const currentLanguageFlag = computed(() => {
      const lang = availableLanguages.find(l => l.code === locale.value);
      return lang ? lang.flag : '🌐';
    });
    
    const toggleDropdown = () => {
      isOpen.value = !isOpen.value;
    };
    
    const changeLanguage = (langCode) => {
      setLanguage(langCode);
      isOpen.value = false;
    };
    
    // Schließen des Dropdowns beim Klicken außerhalb
    const handleClickOutside = (event) => {
      if (isOpen.value && !event.target.closest('.relative')) {
        isOpen.value = false;
      }
    };
    
    onMounted(() => {
      document.addEventListener('click', handleClickOutside);
    });
    
    onUnmounted(() => {
      document.removeEventListener('click', handleClickOutside);
    });
    
    return {
      isOpen,
      availableLanguages,
      currentLanguageCode,
      currentLanguageFlag,
      toggleDropdown,
      changeLanguage
    };
  }
};
</script>

<style scoped>
.flag-icon {
  font-size: 1.2rem;
}
</style> 