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}: LanguageSelectionComponentProps) => {
19  const {t} = useTranslation();
20  const [anchorEl, setAnchorEl] = useState(null);
21  const bannerHeight = useBannerStore(s => s.height);
22  const bannerOffset = useBannerStore(s => s.offset);
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 position="absolute" top={bannerOffset - bannerHeight} right={0} zIndex={1050} p={1}>
38        <IconButton
39          color="primary"
40          aria-label="Languages"
41          onClick={handleClick}
42        >
43          <Icon>language</Icon>
44        </IconButton>
45      </Box>
46      <Menu
47        id="LanguagesMenu"
48        anchorEl={anchorEl}
49        keepMounted
50        open={Boolean(anchorEl)}
51        onClose={() => setAnchorEl(null)}
52      >
53        <MenuItem
54          disabled={language === Enum_Userspermissionsuser_Lang.Fr}
55          onClick={() => onConfirm(Enum_Userspermissionsuser_Lang.Fr)}
56        >{t`languages.fr`}</MenuItem>
57        <MenuItem
58          disabled={language === Enum_Userspermissionsuser_Lang.En}
59          onClick={() => onConfirm(Enum_Userspermissionsuser_Lang.En)}
60        >{t`languages.en`}</MenuItem>
61      </Menu>
62    </>
63  );
64};
65
66export default withLanguagesSelection(IconLanguageSelection);