import { useCallback, useEffect, useState, useRef } from 'react' import useTranslation from 'next-translate/useTranslation' import setLanguage from 'next-translate/setLanguage' import classNames from 'clsx' import i18n from '../../../i18n.json' import { Arrow } from './Arrow' import { LanguageFlag } from './LanguageFlag' export const Language: React.FC = () => { const { lang: currentLanguage } = useTranslation() const [hiddenMenu, setHiddenMenu] = useState(true) const languageClickRef = useRef(null) const handleHiddenMenu = useCallback(() => { setHiddenMenu((oldHiddenMenu) => !oldHiddenMenu) }, []) useEffect(() => { const handleClickEvent = (event: MouseEvent): void => { if (languageClickRef.current == null || event.target == null) { return } if (!languageClickRef.current.contains(event.target as Node)) { setHiddenMenu(true) } } window.document.addEventListener('click', handleClickEvent) return () => { return window.removeEventListener('click', handleClickEvent) } }, []) const handleLanguage = async (language: string): Promise => { await setLanguage(language) } return (
    {i18n.locales.map((language, index) => { if (language === currentLanguage) { return null } return (
  • await handleLanguage(language)} >
  • ) })}
) }