import React, {useMemo} from 'react';
import {useTranslation} from 'react-i18next';
import {useMutation} from 'react-query';
import {Dialog, Typography} from '@components';
import {cancelDraft} from '@modules/drafts/services';
import {DraftPost, DraftState} from '@modules/drafts/interfaces';
import {showSnackbar} from '@redux/dispatchers';
import {removeDraftFromList} from '@modules/drafts/utils';

interface CancelDraftDialogProps {
  onClose: () => void;
  draft: Nullable<DraftPost>;
}

function CancelDraftDialog({onClose, draft}: CancelDraftDialogProps) {
  const {t} = useTranslation();

  const draftSelected = draft!;
  const {isLoading, mutate} = useMutation({
    mutationFn: () => cancelDraft(draftSelected.id),
    onSuccess: () => {
      showSnackbar({
        title: t('drafts.main.cancel_post_success_title'),
        description: t('drafts.main.cancel_post_success_description'),
        variant: 'success',
      });
      removeDraftFromList(draftSelected.id, DraftState.InProgress, true);
      removeDraftFromList(draftSelected.id, draftSelected.state, true);
      onClose();
    },
  });

  const dialogFooterProps = useMemo(
    () => ({
      primaryButton: {
        text: t('drafts.main.cancel_post_submit'),
        onPress: mutate,
        isLoading,
      },
    }),
    [isLoading, mutate, t],
  );

  return (
    <Dialog
      onClose={onClose}
      isVisible={!!draft}
      footer={dialogFooterProps}
      title={t('drafts.main.cancel_post_title')}>
      <Typography>{t('drafts.main.cancel_post_description')}</Typography>
    </Dialog>
  );
}

export default CancelDraftDialog;