1import {useEffect} from 'react';
 2import useLangStore from '../../stores/useLangStore';
 3import useProfile from '../../hooks/useProfile';
 4import {
 5  useUpdateMeMutation,
 6  Enum_Userspermissionsuser_Lang,
 7} from '../../generated/graphql';
 8import moment from 'moment';
 9import {useTranslation} from 'react-i18next';
10
11type LangFunction = (lang: Enum_Userspermissionsuser_Lang) => void;
12
13export interface LanguageSelectionComponentProps {
14  language: Enum_Userspermissionsuser_Lang;
15  setLanguage: LangFunction;
16  onConfirmCallback: LangFunction;
17}
18
19const withLanguagesSelection =
20  (
21    LanguageSelectionComponent: (
22      args: LanguageSelectionComponentProps
23    ) => JSX.Element
24  ) =>
25  () => {
26    const {i18n} = useTranslation();
27    const language = useLangStore(s => s.language);
28    const setLanguage = useLangStore(s => s.setLanguage);
29    const {profile, connected} = useProfile();
30    const [updateProfile] = useUpdateMeMutation();
31
32    useEffect(() => {
33      if (i18n.language === 'en')
34        setLanguage(Enum_Userspermissionsuser_Lang.En);
35    }, []);
36
37    useEffect(() => {
38      const momentLang = language === 'FR' ? 'fr-ch' : 'en';
39      moment.locale(momentLang);
40      i18n.changeLanguage(language?.toLowerCase());
41    }, [language]);
42
43    useEffect(() => {
44      if (profile?.lang) setLanguage(profile.lang);
45    }, [profile]);
46
47    const onConfirmCallback = (lang: Enum_Userspermissionsuser_Lang) => {
48      if (connected) {
49        updateProfile({
50          variables: {
51            userUpdate: {
52              lang,
53            },
54          },
55        });
56      }
57    };
58
59    return (
60      <LanguageSelectionComponent
61        language={language}
62        setLanguage={setLanguage}
63        onConfirmCallback={onConfirmCallback}
64      />
65    );
66  };
67
68export default withLanguagesSelection;