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

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

import { useDeleteSessionMutation } from '../../hooks/useDeleteSessionMutation';

type DeleteSessionDialogProps = {
  sessionId: number;
  onClose: () => void;
};

const DeleteSessionDialog = ({
  sessionId,
  onClose,
}: DeleteSessionDialogProps) => {
  const { t } = useLokaliseTranslation('learning');

  const { mutate, isLoading } = useDeleteSessionMutation();

  const handleDeleteSession = () => {
    mutate(sessionId, { onSettled: onClose });
  };

  return (
    <Dialog
      onClose={onClose}
      title={t('session.dialogs.delete.title')}
      textBody={t('session.dialogs.delete.description')}
      secondaryButtonProps={{
        children: t('general:cancel'),
        disabled: isLoading,
        onClick: e => {
          e.stopPropagation();
          onClose();
        },
      }}
      primaryButtonProps={{
        children: t('general:delete'),
        disabled: isLoading,
        loading: isLoading,
        onClick: e => {
          e.stopPropagation();
          handleDeleteSession();
        },
      }}
    />
  );
};

export default DeleteSessionDialog;
