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';
 8
 9type LangFunction = (lang: Enum_Userspermissionsuser_Lang) => void;
10
11export interface LanguageSelectionComponentProps {
12  language: Enum_Userspermissionsuser_Lang;
13  setLanguage: LangFunction;
14  onConfirmCallback: LangFunction;
15}
16
17const withLanguagesSelection =
18  (
19    LanguageSelectionComponent: (
20      args: LanguageSelectionComponentProps
21    ) => JSX.Element
22  ) => 
23  (props) => {
24    const language = useLangStore(s => s.language);
25    const setLanguage = useLangStore(s => s.setLanguage);
26    const {profile, connected} = useProfile();
27    const [updateProfile] = useUpdateMeMutation();
28
29    useEffect(() => {
30      if (profile?.lang) setLanguage(profile.lang);
31    }, [profile]);
32
33    const onConfirmCallback = (lang: Enum_Userspermissionsuser_Lang) => {
34      if (connected) {
35        updateProfile({
36          variables: {
37            userUpdate: {
38              lang,
39            },
40          },
41        });
42      }
43    };
44
45    return (
46      <LanguageSelectionComponent
47        language={language}
48        setLanguage={setLanguage}
49        onConfirmCallback={onConfirmCallback}
50        {...props}
51      />
52    );
53  };
54
55export default withLanguagesSelection;