import React from 'react';
import {useTranslation} from 'react-i18next';
import {QueryKey, useMutation, useQueryClient} from '@tanstack/react-query';
import {useDispatch} from 'react-redux';
import {Dialog} from '@components';
import {deleteGoal} from '@modules/goals/services';
import {showSnackbar} from '@redux/events';

interface Props {
  isVisible: boolean;
  goalId?: number;
  onClose: () => void;
  queryKeyInvalidated: QueryKey;
}

export function DeleteGoalModal({
  isVisible,
  goalId,
  onClose,
  queryKeyInvalidated,
}: Props) {
  const {t} = useTranslation();
  const dispatch = useDispatch();
  const queryClient = useQueryClient();
  const {mutate, isPending} = useMutation({
    mutationFn: deleteGoal,
    onSuccess: () => {
      queryClient.invalidateQueries({queryKey: queryKeyInvalidated});
      dispatch(
        showSnackbar({
          title: t('goals.delete.success'),
          variant: 'success',
        }),
      );
    },
  });

  const onConfirm = () => {
    onClose();
    goalId && mutate(goalId);
  };

  const primaryButton = {
    text: t('general.delete'),
    onPress: onConfirm,
    isLoading: isPending,
  };

  const secondaryButton = {
    text: t('general.cancel'),
    onPress: onClose,
    isLoading: isPending,
  };

  return (
    <Dialog
      title={t('goals.delete.title')}
      isVisible={isVisible}
      children={undefined}
      footer={{
        primaryButton,
        secondaryButton,
        infoText: t('goals.delete.warning'),
      }}
      onClose={onClose}
      withCloseButton={false}
    />
  );
}