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} from '../../generated/graphql';
 9import withLanguagesSelection, {
10  LanguageSelectionComponentProps,
11} from './withLanguagesSelection';
12
13const IconLanguageSelection = ({
14  language,
15  setLanguage,
16  onConfirmCallback,
17  displayMenu,
18}: LanguageSelectionComponentProps & {displayMenu?: boolean}) => {
19  const {t} = useTranslation();
20  const [anchorEl, setAnchorEl] = useState(null);
21
22  const handleClick = event => {
23    setAnchorEl(event.currentTarget);
24  };
25
26  const onConfirm = (lang: Enum_Userspermissionsuser_Lang) => {
27    setLanguage(lang);
28    setAnchorEl(null);
29
30    onConfirmCallback(lang);
31  };
32
33  return (
34    <>
35      <Box
36        position="absolute"
37        top={displayMenu ? 56 : 0}
38        right={0}
39        zIndex={1050}
40        p={1}
41      >
42        <IconButton
43          color="primary"
44          aria-label="Languages"
45          onClick={handleClick}
46        >
47          <Icon>language</Icon>
48        </IconButton>
49      </Box>
50      <Menu
51        id="LanguagesMenu"
52        anchorEl={anchorEl}
53        keepMounted
54        open={Boolean(anchorEl)}
55        onClose={() => setAnchorEl(null)}
56      >
57        <MenuItem
58          disabled={language === Enum_Userspermissionsuser_Lang.Fr}
59          onClick={() => onConfirm(Enum_Userspermissionsuser_Lang.Fr)}
60        >{t`languages.fr`}</MenuItem>
61        <MenuItem
62          disabled={language === Enum_Userspermissionsuser_Lang.En}
63          onClick={() => onConfirm(Enum_Userspermissionsuser_Lang.En)}
64        >{t`languages.en`}</MenuItem>
65      </Menu>
66    </>
67  );
68};
69
70export default withLanguagesSelection(IconLanguageSelection);