tractatus/public/js/components/language-selector.js

/**
 * Language Selector Component
 * Mobile: Icon-only buttons (flags)
 * Desktop: Dropdown with full language names
 */

(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' }
  ];

  /**
   * Create desktop dropdown selector (with text)
   */
  function createDesktopSelector(currentLang) {
    return `
      <div class="language-selector-desktop hidden md:block relative">
        <label for="language-selector-dropdown" class="sr-only">Select Language</label>
        <select
          id="language-selector-dropdown"
          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 hover:border-gray-400 transition"
          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" 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>
        </div>
      </div>
    `;
  }

  /**
   * Create mobile icon-only selector
   */
  function createMobileSelector(currentLang) {
    return `
      <div class="language-selector-mobile md:hidden flex items-center gap-1" role="group" aria-label="Language selection">
        ${supportedLanguages.filter(lang => !lang.disabled).map(lang => `
          <button
            class="language-btn w-11 h-11 rounded-lg flex items-center justify-center text-2xl transition-all duration-200 ${
              lang.code === currentLang
                ? 'bg-blue-100 ring-2 ring-blue-500'
                : 'bg-white hover:bg-gray-100 border border-gray-300'
            }"
            data-lang="${lang.code}"
            aria-label="Switch to ${lang.name}"
            aria-pressed="${lang.code === currentLang}"
            title="${lang.name}"
          >
            ${lang.flag}
          </button>
        `).join('')}
      </div>
    `;
  }

  /**
   * Create mobile menu language selector (inside drawer)
   */
  function createMobileMenuSelector(currentLang) {
    const container = document.getElementById('mobile-menu-language-selector');
    if (!container) return;

    const selectorHTML = `
      <div class="border-b border-gray-200 pb-3 mb-3">
        <p class="text-xs font-semibold text-gray-500 uppercase tracking-wider mb-2 px-3">Language</p>
        <div class="space-y-1">
          ${supportedLanguages.map(lang => `
            <button
              class="mobile-menu-lang-btn w-full px-3 py-2.5 text-left rounded-lg transition font-medium flex items-center gap-3 ${
                lang.code === currentLang
                  ? 'bg-blue-50 text-blue-700'
                  : 'text-gray-700 hover:bg-gray-50'
              } ${lang.disabled ? 'opacity-50 cursor-not-allowed' : ''}"
              data-lang="${lang.code}"
              ${lang.disabled ? 'disabled' : ''}
              aria-label="Switch to ${lang.name}"
            >
              <span class="text-2xl">${lang.flag}</span>
              <span class="text-sm flex-1">${lang.name}</span>
              ${lang.code === currentLang ? '<span class="text-xs text-blue-600">✓</span>' : ''}
              ${lang.disabled ? '<span class="text-xs text-gray-400">(Coming Soon)</span>' : ''}
            </button>
          `).join('')}
        </div>
      </div>
    `;

    container.innerHTML = selectorHTML;

    // Attach event listeners for mobile menu buttons
    document.querySelectorAll('.mobile-menu-lang-btn').forEach(btn => {
      if (!btn.disabled) {
        btn.addEventListener('click', function(e) {
          const selectedLang = this.getAttribute('data-lang');
          if (window.I18n && selectedLang) {
            window.I18n.setLanguage(selectedLang);
            // Close mobile menu after selection
            const mobileMenu = document.getElementById('mobile-menu');
            if (mobileMenu) {
              mobileMenu.classList.add('hidden');
              document.body.style.overflow = '';
            }
          }
        });
      }
    });
  }

  /**
   * Initialize language selector
   */
  function createLanguageSelector() {
    const container = document.getElementById('language-selector-container');
    if (!container) return;

    const currentLang = (window.I18n && window.I18n.currentLang) || 'en';

    // Create both mobile and desktop versions
    const combinedHTML = createMobileSelector(currentLang) + createDesktopSelector(currentLang);
    container.innerHTML = combinedHTML;

    // Attach event listener for desktop dropdown
    const desktopDropdown = document.getElementById('language-selector-dropdown');
    if (desktopDropdown && window.I18n) {
      desktopDropdown.addEventListener('change', function(e) {
        const selectedLang = e.target.value;
        window.I18n.setLanguage(selectedLang);
      });
    }

    // Attach event listeners for mobile icon buttons
    document.querySelectorAll('.language-btn').forEach(btn => {
      btn.addEventListener('click', function(e) {
        const selectedLang = this.getAttribute('data-lang');
        if (window.I18n && selectedLang) {
          window.I18n.setLanguage(selectedLang);
        }
      });
    });

    // Initialize mobile menu language selector (if container exists)
    createMobileMenuSelector(currentLang);
  }

  /**
   * Update UI when language changes
   */
  function updateLanguageUI(newLang) {
    // Update mobile icon buttons
    document.querySelectorAll('.language-btn').forEach(btn => {
      const lang = btn.getAttribute('data-lang');
      if (lang === newLang) {
        btn.classList.add('bg-blue-100', 'ring-2', 'ring-blue-500');
        btn.classList.remove('bg-white', 'border', 'border-gray-300');
        btn.setAttribute('aria-pressed', 'true');
      } else {
        btn.classList.remove('bg-blue-100', 'ring-2', 'ring-blue-500');
        btn.classList.add('bg-white', 'border', 'border-gray-300');
        btn.setAttribute('aria-pressed', 'false');
      }
    });

    // Update desktop dropdown
    const dropdown = document.getElementById('language-selector-dropdown');
    if (dropdown) {
      dropdown.value = newLang;
    }

    // Update mobile menu buttons
    document.querySelectorAll('.mobile-menu-lang-btn').forEach(btn => {
      const lang = btn.getAttribute('data-lang');
      if (lang === newLang) {
        btn.classList.add('bg-blue-50', 'text-blue-700');
        btn.classList.remove('text-gray-700', 'hover:bg-gray-50');
      } else {
        btn.classList.remove('bg-blue-50', 'text-blue-700');
        btn.classList.add('text-gray-700', 'hover:bg-gray-50');
      }
    });
  }

  // Listen for language change events
  window.addEventListener('languageChanged', function(e) {
    if (e.detail && e.detail.language) {
      updateLanguageUI(e.detail.language);
    }
  });

  // Initialize when DOM is ready
  if (document.readyState === 'loading') {
    document.addEventListener('DOMContentLoaded', createLanguageSelector);
  } else {
    createLanguageSelector();
  }

  // Re-initialize when mobile menu is rendered (if needed)
  window.addEventListener('mobileMenuRendered', createLanguageSelector);

})();