import React, { ChangeEventHandler, ComponentType, KeyboardEventHandler, useCallback, useState } from 'react'; import { FormattedMessage as Message, useIntl } from 'react-intl'; import clsx from 'clsx'; import formStyles from 'app/components/ui/form/form.scss'; import Popup from 'app/components/ui/popup'; import styles from './languageSwitcher.scss'; import LanguagesList from './LanguagesList'; const translateUrl = 'http://ely.by/translate'; export interface LocaleData { code: string; name: string; englishName: string; progress: number; isReleased: boolean; } export type LocalesMap = Record; interface Props { locales: LocalesMap; activeLocale: string; onSelect?: (lang: string) => void; onClose?: () => void; } const LanguageSwitcherPopup: ComponentType = ({ locales, activeLocale, onSelect, onClose }) => { const intl = useIntl(); const [filter, setFilter] = useState(''); const filteredLocales = Object.keys(locales).reduce((acc, key) => { if ( locales[key].englishName.toLowerCase().includes(filter) || locales[key].name.toLowerCase().includes(filter) ) { acc[key] = locales[key]; } return acc; }, {} as typeof locales); const onFilterChange = useCallback>( (event) => { setFilter(event.currentTarget.value.trim().toLowerCase()); }, [setFilter], ); const onFilterKeyPress = useCallback>( (event) => { if (event.key !== 'Enter' || filter === '') { return; } const localesKeys = Object.keys(filteredLocales); if (localesKeys.length === 0) { return; } onSelect && onSelect(localesKeys[0]); }, [filter, filteredLocales, onSelect], ); return ( } wrapperClassName={styles.boundings} bodyClassName={styles.body} onClose={onClose} data-testid="language-switcher" data-e2e-active-locale={activeLocale} >
{' '}
); }; export default LanguageSwitcherPopup;