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