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