managarten/apps-archived/memoro/apps/mobile/features/i18n/LanguageSelector.tsx

import React from 'react';
import { useTranslation } from 'react-i18next';
import BaseModal from '~/components/atoms/BaseModal';
import BaseLanguageSelector, { LanguageItem } from '~/components/molecules/BaseLanguageSelector';
import { useLanguage } from './LanguageContext';

interface LanguageSelectorProps {
	isVisible: boolean;
	onClose: () => void;
}

/**
 * Komponente zur Auswahl der Sprache in der App.
 * Zeigt alle verfügbaren Sprachen in einer scrollbaren Liste an.
 */
const LanguageSelector: React.FC<LanguageSelectorProps> = ({ isVisible, onClose }) => {
	const { currentLanguage, changeLanguage, languages } = useLanguage();
	const { t } = useTranslation();

	// Convert languages to BaseLanguageSelector format
	const languageItems: Record<string, LanguageItem> = Object.entries(languages).reduce(
		(acc, [code, lang]) => {
			acc[code] = {
				code,
				...lang,
			};
			return acc;
		},
		{} as Record<string, LanguageItem>
	);

	// Handler für die Auswahl einer Sprache
	const handleLanguageSelect = async (selectedLanguages: string[]) => {
		if (selectedLanguages.length > 0) {
			await changeLanguage(selectedLanguages[0]);
			onClose();
		}
	};

	return (
		<BaseModal
			isVisible={isVisible}
			onClose={onClose}
			title={t('language.interface_language_title', 'App Interface Language')}
			animationType="fade"
			closeOnOverlayPress={true}
			hideFooter={true}
			noPadding={true}
			size="medium"
		>
			<BaseLanguageSelector
				languages={languageItems}
				selectedLanguages={[currentLanguage]}
				onSelect={handleLanguageSelect}
				mode="single"
				showAutoDetect={false}
				height={450}
				autoSelectOnSingle={true}
				onClose={onClose}
			/>
		</BaseModal>
	);
};

export default LanguageSelector;