1import {useState} from 'react';
 2import Box from '@material-ui/core/Box';
 3import IconButton from '@material-ui/core/IconButton';
 4import Icon from '@material-ui/core/Icon';
 5import Menu from '@material-ui/core/Menu';
 6import MenuItem from '@material-ui/core/MenuItem';
 7import {useTranslation} from 'react-i18next';
 8import {Enum_Userspermissionsuser_Lang as Lang} 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: Lang) => {
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        >
44          <Icon>language</Icon>
45        </IconButton>
46      </Box>
47      <Menu
48        id="LanguagesMenu"
49        anchorEl={anchorEl}
50        keepMounted
51        open={Boolean(anchorEl)}
52        onClose={() => setAnchorEl(null)}
53      >
54        <MenuItem
55          disabled={language === Lang.Fr}
56          onClick={() => onConfirm(Lang.Fr)}
57        >{t`languages.fr`}</MenuItem>
58        <MenuItem
59          disabled={language === Lang.En}
60          onClick={() => onConfirm(Lang.En)}
61        >{t`languages.en`}</MenuItem>
62      </Menu>
63    </>
64  );
65};
66
67export default withLanguagesSelection(IconLanguageSelection);