import React, {useMemo} from 'react';
import {useTranslation} from 'react-i18next';
import {useMutation, useQueryClient} from 'react-query';
import {useNavigation} from '@react-navigation/native';
import {Dialog, Typography} from '@components';
import {removeKeyUpdate} from '@modules/keyUpdates/service';
import {Post} from '@modules/post/interfaces';
import {removeKeyUpdateFromList} from '@modules/keyUpdates/utils';
import {updateFeedPost} from '@modules/post/utils';
import {useGroupFeedStore} from '@modules/group/store/useGroupFeedStore';
import {keyUpdatesQueryKeys} from '@modules/keyUpdates/constants';
import {showSnackbar} from '@redux/dispatchers';

interface RemoveKeyUpdateDialogProps {
  onClose: () => void;
  post: Nullable<Post>;
  unreads: boolean;
  goBackOnDelete?: boolean;
}

function RemoveKeyUpdateDialog({
  onClose,
  post,
  unreads,
  goBackOnDelete = false,
}: RemoveKeyUpdateDialogProps) {
  const {t} = useTranslation();
  const queryClient = useQueryClient();
  const {goBack} = useNavigation();
  const updatePost = useGroupFeedStore(s => s.updatePost);

  const {mutate, isLoading} = useMutation({
    mutationFn: removeKeyUpdate,
    onSuccess: () => {
      onClose();
      goBackOnDelete && goBack();
      if (post) {
        showSnackbar({
          title: t('post.post_unmarked_as_key_update_success'),
          variant: 'success',
        });

        if (post.groupId) {
          updatePost(post.groupId, post.id, postToUpdate => ({
            ...postToUpdate,
            isKeyUpdate: false,
          }));
        } else {
          updateFeedPost(post.id, postToUpdate => ({
            ...postToUpdate,
            isKeyUpdate: false,
          }));
        }
        removeKeyUpdateFromList(post.id, unreads);
        queryClient.invalidateQueries(keyUpdatesQueryKeys.keyUpdatesPreview);
      }
    },
  });

  const dialogFooterProps = useMemo(
    () => ({
      primaryButton: {
        text: t('post.yes_remove'),
        onPress: () => mutate({postId: post!.id}),
        isLoading,
      },
      secondaryButton: {
        text: t('general.cancel'),
        onPress: onClose,
      },
    }),
    [isLoading, mutate, onClose, post, t],
  );

  return (
    <Dialog
      onClose={onClose}
      isVisible={!!post}
      footer={dialogFooterProps}
      title={t('post.unmark_as_key_update_modal_title')}
      titleNumberOfLines={2}
      withCloseButton={false}>
      <Typography>
        {t('post.unmark_as_key_update_modal_description')}
      </Typography>
    </Dialog>
  );
}

export default RemoveKeyUpdateDialog;