import { UseMutationResult } from 'react-query';

import { useModal } from '@material-hu/hooks/useModal';

import HuDialog from '@material-hu/components/design-system/Dialog';

import { useLokaliseTranslation } from 'src/utils/i18n';

export const useDeleteCompetencyProfileModal = (
  deleteCompetencyProfile: UseMutationResult<
    unknown,
    unknown,
    { competencyProfileId: number },
    unknown
  >,
) => {
  const { t } = useLokaliseTranslation('competencies');

  const {
    modal: deleteModal,
    showModal: showDeleteModal,
    closeModal: closeDeleteModal,
  } = useModal<{ competencyProfileId: number }>(
    ({ competencyProfileId }) => (
      <HuDialog
        title={t('delete_profile_confirmation_modal.title')}
        textBody={t('delete_profile_confirmation_modal.description')}
        onClose={() => {
          closeDeleteModal();
        }}
        primaryButtonProps={{
          children: t('general:delete'),
          loading: deleteCompetencyProfile.isLoading,
          onClick: e => {
            e.stopPropagation();
            deleteCompetencyProfile.mutateAsync(
              { competencyProfileId },
              { onSettled: closeDeleteModal },
            );
          },
        }}
        secondaryButtonProps={{
          children: t('general:cancel'),
          onClick: e => {
            e.stopPropagation();
            closeDeleteModal();
          },
        }}
      />
    ),
    { fullWidth: true, maxWidth: 'sm' },
  );

  return { deleteModal, showDeleteModal, closeDeleteModal };
};