1import {useState} from 'react';
 2import MenuList from '@mui/material/MenuList';
 3import MenuItem from '@mui/material/MenuItem';
 4import Box from '@mui/material/Box';
 5import {useTranslation} from 'next-i18next';
 6import withLanguagesSelection, {
 7  LanguageSelectionComponentProps,
 8} from './withLanguagesSelection';
 9import {langLocales, langs} from '../../locales/constants';
10import {ListItemIcon, ListItemText} from '@mui/material';
11import LanguageIcon from '@mui/icons-material/Language';
12import theme from '../../theme';
13
14const Languages = ({
15  language,
16  onChangeLang,
17}: LanguageSelectionComponentProps) => {
18  const {t} = useTranslation();
19  const [isSelecting, setSelecting] = useState(false);
20
21  const handleClick = event => {
22    setSelecting(!isSelecting);
23  };
24
25  const onConfirm = (lang: (typeof langs)[number]) => {
26    setSelecting(false);
27    onChangeLang(lang);
28  };
29
30  return (
31    <Box>
32      <MenuItem onClick={handleClick}>
33        <ListItemIcon>
34          <LanguageIcon />
35        </ListItemIcon>
36        <ListItemText>{t('menu.language')}</ListItemText>
37      </MenuItem>
38      <MenuList
39        sx={{
40          visibility: isSelecting ? 'visible' : 'hidden',
41          maxHeight: isSelecting ? 'none' : 0,
42          padding: isSelecting ? `0 ${theme.spacing(0.5)}` : 0,
43          overflow: 'hidden',
44        }}
45        dense
46      >
47        {langs.map(lang => (
48          <MenuItem
49            key={lang}
50            disabled={language === lang}
51            onClick={() => onConfirm(lang)}
52          >
53            {langLocales[lang]}
54          </MenuItem>
55        ))}
56      </MenuList>
57    </Box>
58  );
59};
60
61export default withLanguagesSelection(Languages);