import React, { createContext, useContext, useEffect } from 'react';
import { useTranslation } from 'react-i18next';
const LanguageContext = createContext();
export const useLanguage = () => {
const context = useContext(LanguageContext);
if (!context) {
throw new Error('useLanguage must be used within a LanguageProvider');
}
return context;
};
export const LanguageProvider = ({ children }) => {
const { i18n, t } = useTranslation();
const availableLanguages = [
{ code: 'en', name: 'English', flag: '🇺🇸' },
{ code: 'zh', name: '中文', flag: '🇨🇳' },
{ code: 'es', name: 'Español', flag: '🇪🇸' },
{ code: 'ko', name: '한국어', flag: '🇰🇷' },
{ code: 'ja', name: '日本語', flag: '🇯🇵' },
{ code: 'th', name: 'ไทย', flag: '🇹🇭' },
{ code: 'vi', name: 'Tiếng Việt', flag: '🇻🇳' },
{ code: 'pt', name: 'Português', flag: '🇵🇹' },
{ code: 'tr', name: 'Türkçe', flag: '🇹🇷' },
{ code: 'hi', name: 'हिंदी', flag: '🇮🇳' },
{ code: 'it', name: 'Italiano', flag: '🇮🇹' },
{ code: 'fr', name: 'Français', flag: '🇫🇷' },
{ code: 'de', name: 'Deutsch', flag: '🇩🇪' },
{ code: 'ru', name: 'Русский', flag: '🇷🇺' }
];
const changeLanguage = (lang) => {
console.log('changeLanguage called with:', lang);
i18n.changeLanguage(lang);
// Update URL
const params = new URLSearchParams(window.location.search);
if (lang === 'en') {
params.delete('lang');
} else {
params.set('lang', lang);
}
const hash = window.location.hash || '#projects';
const queryString = params.toString();
const newUrl = `${window.location.pathname}${queryString ? `?${queryString}` : ''}${hash}`;
window.history.replaceState({}, '', newUrl);
};
// Set initial language from URL on mount
useEffect(() => {
const params = new URLSearchParams(window.location.search);
const urlLang = params.get('lang');
if (urlLang && availableLanguages.some(lang => lang.code === urlLang)) {
i18n.changeLanguage(urlLang);
}
}, [i18n, availableLanguages]);
const value = {
currentLanguage: i18n.language,
changeLanguage,
t,
availableLanguages
};
return (
<LanguageContext.Provider value={value}>
{children}
</LanguageContext.Provider>
);
};