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 'react-i18next';
 7import {Enum_Userspermissionsuser_Lang as SupportedLocales} from '../../generated/graphql';
 8import withLanguagesSelection, {
 9  LanguageSelectionComponentProps,
10} from './withLanguagesSelection';
11
12const Languages = ({
13  language,
14  onChangeLang,
15}: LanguageSelectionComponentProps) => {
16  const theme = useTheme();
17  const {t} = useTranslation();
18  const [isSelecting, setSelecting] = useState(false);
19
20  const handleClick = event => {
21    setSelecting(!isSelecting);
22  };
23
24  const onConfirm = (lang: SupportedLocales) => {
25    setSelecting(false);
26    onChangeLang(lang);
27  };
28
29  return (
30    <Box>
31      <MenuItem onClick={handleClick}>{t('menu.language')}</MenuItem>
32      <MenuList
33        sx={{
34          visibility: isSelecting ? 'visible' : 'hidden',
35          maxHeight: isSelecting ? 'none' : 0,
36          padding: isSelecting ? `0 ${theme.spacing(0.5)}` : 0,
37          overflow: 'hidden',
38        }}
39        dense
40      >
41        {Object.keys(SupportedLocales).map(locale => (
42          <MenuItem
43            key={locale}
44            disabled={language === SupportedLocales[locale]}
45            onClick={() => onConfirm(SupportedLocales[locale])}
46          >
47            {t(`PROTECTED.languages.${locale}`)}
48          </MenuItem>
49        ))}
50      </MenuList>
51    </Box>
52  );
53};
54
55export default withLanguagesSelection(Languages);