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}: LanguageSelectionComponentProps) => {
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: Enum_Userspermissionsuser_Lang) => {
26    setLanguage(lang);
27    setAnchorEl(null);
28
29    onConfirmCallback(lang);
30  };
31
32  return (
33    <>
34      <Box position="fixed" top={0} right={0} zIndex={1050} p={1}>
35        <IconButton
36          color="primary"
37          aria-label="Languages"
38          onClick={handleClick}
39        >
40          <Icon>language</Icon>
41        </IconButton>
42      </Box>
43      <Menu
44        id="LanguagesMenu"
45        anchorEl={anchorEl}
46        keepMounted
47        open={Boolean(anchorEl)}
48        onClose={() => setAnchorEl(null)}
49      >
50        <MenuItem
51          disabled={language === Enum_Userspermissionsuser_Lang.Fr}
52          onClick={() => onConfirm(Enum_Userspermissionsuser_Lang.Fr)}
53        >{t`languages.fr`}</MenuItem>
54        <MenuItem
55          disabled={language === Enum_Userspermissionsuser_Lang.En}
56          onClick={() => onConfirm(Enum_Userspermissionsuser_Lang.En)}
57        >{t`languages.en`}</MenuItem>
58      </Menu>
59    </>
60  );
61};
62
63export default withLanguagesSelection(IconLanguageSelection);