1import {
 2  useToast,
 3} from '@chakra-ui/react';
 4import { useServices } from 'stores';
 5import { FC, useState } from 'react';
 6import { useTranslation } from 'react-i18next';
 7import { DeleteModal } from 'components/delete-modal';
 8
 9export const DeleteServiceModal: FC = () => {
10  const { deleteService, refetchServices, deletingService, onDeletingService } = useServices();
11  const { t } = useTranslation();
12  const toast = useToast();
13  const [loading, setLoading] = useState(false);
14  const onClose = () => {
15    onDeletingService(null);
16  };
17
18  const onDelete = () => {
19    if (deletingService) {
20      setLoading(true);
21      deleteService(deletingService)
22        .then(() => {
23          refetchServices();
24          toast({
25            title: t('deleteService.deleteSuccess', { name: deletingService.name }),
26            status: 'success',
27            isClosable: true,
28            position: 'top',
29            duration: 3000,
30          });
31        })
32        .then(onClose)
33        .finally(setLoading.bind(null, false));
34    }
35  };
36
37  return (
38    <DeleteModal
39      deleteObjectTitleT={'deleteService.title'}
40      deleteObjectPromptT={'deleteService.prompt'}
41      onDelete={onDelete}
42      loading={loading}
43      isOpen={!!deletingService}
44      onClose={onClose}
45      deletingObjectName={deletingService?.name}
46    />
47  );
48};