1import {useState, useEffect} from 'react';
 2import moment from 'moment';
 3import MenuList from '@material-ui/core/MenuList';
 4import MenuItem from '@material-ui/core/MenuItem';
 5import {makeStyles} from '@material-ui/core/styles';
 6import {useTranslation} from 'react-i18next';
 7import useLangStore from '../../stores/useLangStore';
 8import useProfile from '../../hooks/useProfile';
 9import {
10  useUpdateMeMutation,
11  Enum_Userspermissionsuser_Lang,
12} from '../../generated/graphql';
13
14const Languages = () => {
15  const {t, i18n} = useTranslation();
16  const [isSelecting, setSelecting] = useState(false);
17  const language = useLangStore(s => s.language);
18  const setLanguage = useLangStore(s => s.setLanguage);
19  const {profile, connected} = useProfile();
20  const [updateProfile] = useUpdateMeMutation();
21  const { languagesList } = useStyles({ isSelecting });
22
23  useEffect(() => {
24    if (navigator?.language === 'en')
25      setLanguage(Enum_Userspermissionsuser_Lang.En);
26  }, []);
27
28  useEffect(() => {
29    const momentLang = language === 'FR' ? 'fr-ch' : 'en';
30    moment.locale(momentLang);
31    i18n.changeLanguage(language?.toLowerCase());
32  }, [language]);
33
34  useEffect(() => {
35    if (profile?.lang) setLanguage(profile.lang);
36  }, [profile]);
37
38  const handleClick = event => {
39    setSelecting(!isSelecting);
40  };
41
42  const onConfirm = (lang: Enum_Userspermissionsuser_Lang) => {
43    setLanguage(lang);
44    setSelecting(false);
45
46    if (connected) {
47      updateProfile({
48        variables: {
49          userUpdate: {
50            lang,
51          },
52        },
53      });
54    }
55  };
56
57  return (
58    <>
59      <MenuItem onClick={handleClick} >
60        {t('menu.language')}
61      </MenuItem>
62      <MenuList className={languagesList} dense>
63        <MenuItem
64          disabled={language === Enum_Userspermissionsuser_Lang.Fr}
65          onClick={() => onConfirm(Enum_Userspermissionsuser_Lang.Fr)}
66        >{t`languages.fr`}</MenuItem>
67        <MenuItem
68          disabled={language === Enum_Userspermissionsuser_Lang.En}
69          onClick={() => onConfirm(Enum_Userspermissionsuser_Lang.En)}
70        >{t`languages.en`}</MenuItem>
71      </MenuList>
72    </>
73  );
74};
75
76
77const useStyles = makeStyles(theme => ({
78  languagesList: ({ isSelecting }: { isSelecting: boolean }) => ({
79    visibility: isSelecting ? 'visible' : 'hidden',
80    maxHeight: isSelecting ? 'none' : 0, 
81    padding: isSelecting ? `0 ${theme.spacing(.5)}px` : 0, 
82    overflow: 'hidden', 
83  }),
84}));
85
86export default Languages;