import React, {useCallback} from 'react';
import {useTranslation} from 'react-i18next';
import {useMutation} from 'react-query';
import {useDispatch} from 'react-redux';
import {useGoBack} from '@hooks/useGoBack';
import {Navigation} from '@interfaces/navigation';
import {User} from '@interfaces/user';
import {
  addUsersToGroupChat,
  getPossibleGroupParticipants,
} from '@modules/chat/services';
import {CHAT_QUERY_KEYS} from '@modules/chat/constants';
import {updateChat} from '@modules/chat/redux';
import {Screens} from '@shared/constants';

import SelectChatMembers from '../../components/SelectChatMembers';

export function GroupAddMembersScreen({
  route,
}: Navigation<Screens.CHAT_GROUP_ADD_MEMBERS>) {
  const {t} = useTranslation();
  const dispatch = useDispatch();
  const {goBack} = useGoBack();
  const queryKey = CHAT_QUERY_KEYS.chatGroupUsers(route.params.chatId);
  const queryFn = useCallback(
    (searchText: string) =>
      ({page}: {page: number}) =>
        getPossibleGroupParticipants({
          chatId: route.params.chatId,
          page,
          q: searchText,
        }),
    [route.params.chatId],
  );

  const addUsersToGroupChatMutation = useMutation(
    (users: User[]) => addUsersToGroupChat(route.params.chatId, users),
    {
      onSuccess: ({chat: {id: chatId, otherUsers}}) => {
        // Update chat users
        dispatch(updateChat({chatId, otherUsers: otherUsers || undefined}));

        goBack();
      },
    },
  );

  return (
    <SelectChatMembers
      onCancel={addUsersToGroupChatMutation.isLoading ? undefined : goBack}
      onNext={
        addUsersToGroupChatMutation.isLoading
          ? undefined
          : addUsersToGroupChatMutation.mutate
      }
      nextLabel={t('general.save')}
      queryKey={queryKey}
      queryFn={queryFn}
    />
  );
}