import React from 'react';
import {useTranslation} from 'react-i18next';
import {useMutation} from 'react-query';
import {useGoBack} from '@hooks/useGoBack';
import {Navigation} from '@interfaces/navigation';
import {User} from '@interfaces/user';
import {forwardChatMessage} from '@modules/chat/services';
import SelectUsersAndGroups from '@modules/chat/components/SelectUsersAndGroups';
import {GroupChatListItem} from '@modules/chat/interfaces';
import {showSnackbar} from '@redux/dispatchers';
import {Screens} from '@shared/constants';

export function ChatForwardMessageScreen({
  route: {
    params: {chatId, messageId},
  },
}: Navigation<Screens.CHAT_FORWARD_MESSAGE>) {
  const {t} = useTranslation();
  const {goBack} = useGoBack();
  const forwardChatMessageMutation = useMutation(
    ({
      selectedUsers,
      selectedGroups,
    }: {
      selectedUsers: User[];
      selectedGroups: GroupChatListItem[];
    }) =>
      forwardChatMessage({
        chatId,
        messageId,
        userIds: selectedUsers.map(user => user.id),
        groupIds: selectedGroups.map(group => group.chatId),
      }),
    {
      onSuccess: () => {
        showSnackbar({title: t('chats.forwarded')});
      },
      onSettled: () => {
        goBack();
      },
    },
  );

  return (
    <SelectUsersAndGroups
      onCancel={forwardChatMessageMutation.isLoading ? undefined : goBack}
      onNext={
        forwardChatMessageMutation.isLoading
          ? undefined
          : forwardChatMessageMutation.mutate
      }
    />
  );
}