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        <MenuItem
42          disabled={language === SupportedLocales['fr']}
43          onClick={() => onConfirm(SupportedLocales['fr'])}
44        >{t`languages.fr`}</MenuItem>
45        <MenuItem
46          disabled={language === SupportedLocales['en']}
47          onClick={() => onConfirm(SupportedLocales['en'])}
48        >{t`languages.en`}</MenuItem>
49      </MenuList>
50    </Box>
51  );
52};
53
54export default withLanguagesSelection(Languages);