reactShop/src/components/LanguageSwitcher.js

import React, { Component } from 'react';
import Box from '@mui/material/Box';
import Button from '@mui/material/Button';
import Menu from '@mui/material/Menu';
import MenuItem from '@mui/material/MenuItem';
import Typography from '@mui/material/Typography';
import { withI18n } from '../i18n/withTranslation.js';

const LANGUAGE_FLAG_EMOJIS = {
  ar: '🇪🇬',
  bg: '🇧🇬',
  cs: '🇨🇿',
  de: '🇩🇪',
  el: '🇬🇷',
  en: '🇺🇸',
  es: '🇪🇸',
  fr: '🇫🇷',
  hr: '🇭🇷',
  hu: '🇭🇺',
  it: '🇮🇹',
  pl: '🇵🇱',
  ro: '🇷🇴',
  ru: '🇷🇺',
  sk: '🇸🇰',
  sl: '🇸🇮',
  sq: '🇦🇱',
  sr: '🇷🇸',
  sv: '🇸🇪',
  tr: '🇹🇷',
  uk: '🇺🇦',
  zh: '🇨🇳'
};

class LanguageSwitcher extends Component {
  constructor(props) {
    super(props);

    this.state = {
      anchorEl: null
    };
  }

  handleClick = (event) => {
    this.setState({ anchorEl: event.currentTarget });
  };

  handleClose = () => {
    this.setState({ anchorEl: null });
  };

  handleLanguageChange = async (language) => {
    const { languageContext } = this.props;
    if (languageContext) {
      try {
        await languageContext.changeLanguage(language);
      } catch (error) {
        console.error('Failed to change language:', error);
      }
    }
    this.handleClose();
  };

  getLanguageFlag = (lang) => {
    return (
      <Box
        component="span"
        sx={{
          display: 'inline-flex',
          alignItems: 'center',
          justifyContent: 'center',
          minWidth: '20px',
          height: '14px',
          fontSize: '14px',
          lineHeight: 1,
          borderRadius: '2px',
          overflow: 'hidden'
        }}
      >
        {LANGUAGE_FLAG_EMOJIS[lang] || this.getLanguageLabel(lang)}
      </Box>
    );
  };

  getLanguageLabel = (lang) => {
    const labels = {
      'ar': 'EG',
      'bg': 'BG',
      'cs': 'CZ',
      'de': 'DE',
      'el': 'GR',
      'en': 'US',
      'es': 'ES',
      'fr': 'FR',
      'hr': 'HR',
      'hu': 'HU',
      'it': 'IT',
      'pl': 'PL',
      'ro': 'RO',
      'ru': 'RU',
      'sk': 'SK',
      'sl': 'SI',
      'sq': 'AL',
      'sr': 'RS',
      'sv': 'SE',
      'tr': 'TR',
      'uk': 'UA',
      'zh': 'CN'
    };
    return labels[lang] || lang.toUpperCase();
  };

  getLanguageName = (lang) => {
    const names = {
      'ar': 'العربية',
      'bg': 'Български',
      'cs': 'Čeština',
      'de': 'Deutsch',
      'el': 'Ελληνικά',
      'en': 'English',
      'es': 'Español',
      'fr': 'Français',
      'hr': 'Hrvatski',
      'hu': 'Magyar',
      'it': 'Italiano',
      'pl': 'Polski',
      'ro': 'Română',
      'ru': 'Русский',
      'sk': 'Slovenčina',
      'sl': 'Slovenščina',
      'sq': 'Shqip',
      'sr': 'Српски',
      'sv': 'Svenska',
      'tr': 'Türkçe',
      'uk': 'Українська',
      'zh': '中文'
    };
    return names[lang] || lang;
  };

  render() {
    const { languageContext } = this.props;
    const { anchorEl } = this.state;
    
    if (!languageContext) {
      return null;
    }

    const { currentLanguage, allLanguages } = languageContext;
    const open = Boolean(anchorEl);

    return (
      <Box sx={{ display: 'flex', alignItems: 'center' }}>
        <Button
          aria-controls={open ? 'language-menu' : undefined}
          aria-haspopup="true"
          aria-expanded={open ? 'true' : undefined}
          onClick={this.handleClick}
          color="inherit"
          size="small"
          sx={{ 
            my: 1, 
            mx: 0.5,
            minWidth: 'auto',
            textTransform: 'none',
            fontSize: '0.875rem'
          }}
        >
          {this.getLanguageLabel(currentLanguage)}
        </Button>
        <Menu
          id="language-menu"
          anchorEl={anchorEl}
          open={open}
          onClose={this.handleClose}
          disableScrollLock={true}
          MenuListProps={{
            'aria-labelledby': 'language-button',
          }}
          anchorOrigin={{
            vertical: 'bottom',
            horizontal: 'right',
          }}
          transformOrigin={{
            vertical: 'top',
            horizontal: 'right',
          }}
        >
          {allLanguages.map((language) => {
            return (
              <MenuItem
                key={language}
                onClick={() => this.handleLanguageChange(language)}
                selected={language === currentLanguage}
                sx={{ 
                  minWidth: 160,
                  display: 'flex',
                  justifyContent: 'space-between',
                  gap: 2
                }}
              >
                <Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
                  {this.getLanguageFlag(language)}
                  <Typography variant="body2">
                    {this.getLanguageName(language)}
                  </Typography>
                </Box>
                <Typography variant="caption" color="text.secondary" sx={{ ml: 'auto' }}>
                  {this.getLanguageLabel(language)}
                </Typography>
              </MenuItem>
            );
          })}
        </Menu>
      </Box>
    );
  }
}

export default withI18n()(LanguageSwitcher);