1import {useState} from 'react';
 2import Box from '@mui/material/Box';
 3import IconButton from '@mui/material/IconButton';
 4import Icon from '@mui/material/Icon';
 5import Menu from '@mui/material/Menu';
 6import MenuItem from '@mui/material/MenuItem';
 7import {useTranslation} from 'react-i18next';
 8import {Enum_Userspermissionsuser_Lang as SupportedLocales} from '../../generated/graphql';
 9import withLanguagesSelection, {
10  LanguageSelectionComponentProps,
11} from './withLanguagesSelection';
12
13const IconLanguageSelection = ({
14  language,
15  onChangeLang,
16  displayMenu,
17}: LanguageSelectionComponentProps & {displayMenu?: boolean}) => {
18  const {t} = useTranslation();
19  const [anchorEl, setAnchorEl] = useState(null);
20
21  const handleClick = event => {
22    setAnchorEl(event.currentTarget);
23  };
24
25  const onConfirm = (lang: SupportedLocales) => {
26    setAnchorEl(null);
27    onChangeLang(lang);
28  };
29
30  return <>
31    <Box
32      position="absolute"
33      top={displayMenu ? 56 : 0}
34      right={0}
35      zIndex={1050}
36      p={1}
37    >
38      <IconButton color="primary" aria-label="Languages" onClick={handleClick} size="large">
39        <Icon>language</Icon>
40      </IconButton>
41    </Box>
42    <Menu
43      id="LanguagesMenu"
44      anchorEl={anchorEl}
45      keepMounted
46      open={Boolean(anchorEl)}
47      onClose={() => setAnchorEl(null)}
48    >
49      {Object.keys(SupportedLocales).map(locale => (
50          <MenuItem
51            disabled={language === SupportedLocales[locale]}
52            onClick={() => onConfirm(SupportedLocales[locale])}
53          >{t(`languages.${locale}`)}</MenuItem>
54        ))}
55    </Menu>
56  </>;
57};
58
59export default withLanguagesSelection(IconLanguageSelection);