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 type DeleteGoalModalProps = {
  deleteCompetency: UseMutationResult<
    unknown,
    unknown,
    { competencyId: number },
    unknown
  >;
};

export const useDeleteCompetencyModal = (
  deleteCompetency: UseMutationResult<
    unknown,
    unknown,
    { competencyId: number },
    unknown
  >,
) => {
  const { t } = useLokaliseTranslation('competencies');

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

  return { deleteModal, showDeleteModal, closeDeleteModal };
};