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 'next-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    <>
32      <Box
33        position="absolute"
34        top={displayMenu ? 56 : 0}
35        right={0}
36        zIndex={1050}
37        p={1}
38      >
39        <IconButton
40          color="primary"
41          aria-label="Languages"
42          onClick={handleClick}
43          size="large"
44        >
45          <Icon>language</Icon>
46        </IconButton>
47      </Box>
48      <Menu
49        id="LanguagesMenu"
50        anchorEl={anchorEl}
51        keepMounted
52        open={Boolean(anchorEl)}
53        onClose={() => setAnchorEl(null)}
54      >
55        {Object.keys(SupportedLocales).map(locale => (
56          <MenuItem
57            key={locale}
58            disabled={language === SupportedLocales[locale]}
59            onClick={() => onConfirm(SupportedLocales[locale])}
60          >
61            {t(`PROTECTED.languages.${locale}`)}
62          </MenuItem>
63        ))}
64      </Menu>
65    </>
66  );
67};
68
69export default withLanguagesSelection(IconLanguageSelection);