/**
 * Language Selector Component
 * Creates a dropdown for switching between supported languages
 */

(function() {
  const supportedLanguages = [
    { code: 'en', name: 'English', flag: '🇬🇧' },
    { code: 'de', name: 'Deutsch', flag: '🇩🇪' },
    { code: 'fr', name: 'Français', flag: '🇫🇷' },
    { code: 'mi', name: 'Te Reo Māori', flag: '🇳🇿', disabled: true, tooltip: 'Coming when system is complete' }
  ];
  
  function createLanguageSelector() {
    const container = document.getElementById('language-selector-container');
    if (!container) return;
    
    const currentLang = (window.I18n && window.I18n.currentLang) || 'en';
    
    const selectorHTML = `
      <div class="language-selector relative inline-block">
        <label for="language-selector" class="sr-only">Select Language</label>
        <select 
          id="language-selector"
          class="px-3 py-2 pr-8 border border-gray-300 rounded-lg bg-white text-gray-700 text-sm focus:border-blue-600 focus:outline-none cursor-pointer appearance-none"
          aria-label="Select language"
        >
          ${supportedLanguages.map(lang => `
            <option 
              value="${lang.code}" 
              ${lang.code === currentLang ? 'selected' : ''}
              ${lang.disabled ? 'disabled' : ''}
            >
              ${lang.flag} ${lang.name}${lang.disabled ? ' (Coming Soon)' : ''}
            </option>
          `).join('')}
        </select>
        <div class="pointer-events-none absolute inset-y-0 right-0 flex items-center px-2 text-gray-700">
          <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20">
            <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>
        </div>
      </div>
    `;
    
    container.innerHTML = selectorHTML;
    
    // Add change event listener
    const selector = document.getElementById('language-selector');
    if (selector && window.I18n) {
      selector.addEventListener('change', function(e) {
        const selectedLang = e.target.value;
        window.I18n.setLanguage(selectedLang);
      });
    }
  }
  
  // Initialize when DOM is ready
  if (document.readyState === 'loading') {
    document.addEventListener('DOMContentLoaded', createLanguageSelector);
  } else {
    createLanguageSelector();
  }
})();