1import {useState} from 'react';
 2import MenuList from '@material-ui/core/MenuList';
 3import MenuItem from '@material-ui/core/MenuItem';
 4import {makeStyles} from '@material-ui/core/styles';
 5import {useTranslation} from 'react-i18next';
 6import {Enum_Userspermissionsuser_Lang as SupportedLocales} from '../../generated/graphql';
 7import withLanguagesSelection, {
 8  LanguageSelectionComponentProps,
 9} from './withLanguagesSelection';
10
11const Languages = ({
12  language,
13  onChangeLang,
14}: LanguageSelectionComponentProps) => {
15  const {t} = useTranslation();
16  const [isSelecting, setSelecting] = useState(false);
17  const {languagesList} = useStyles({isSelecting});
18
19  const handleClick = event => {
20    setSelecting(!isSelecting);
21  };
22
23  const onConfirm = (lang: SupportedLocales) => {
24    setSelecting(false);
25    onChangeLang(lang);
26  };
27
28  return (
29    <>
30      <MenuItem onClick={handleClick}>{t('menu.language')}</MenuItem>
31      <MenuList className={languagesList} dense>
32        <MenuItem
33          disabled={language === SupportedLocales['fr']}
34          onClick={() => onConfirm(SupportedLocales['fr'])}
35        >{t`languages.fr`}</MenuItem>
36        <MenuItem
37          disabled={language === SupportedLocales['en']}
38          onClick={() => onConfirm(SupportedLocales['en'])}
39        >{t`languages.en`}</MenuItem>
40      </MenuList>
41    </>
42  );
43};
44
45const useStyles = makeStyles(theme => ({
46  languagesList: ({isSelecting}: {isSelecting: boolean}) => ({
47    visibility: isSelecting ? 'visible' : 'hidden',
48    maxHeight: isSelecting ? 'none' : 0,
49    padding: isSelecting ? `0 ${theme.spacing(0.5)}px` : 0,
50    overflow: 'hidden',
51  }),
52}));
53
54export default withLanguagesSelection(Languages);