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

import { useRemoveCoverPicture } from 'src/pages/dashboard/HuLibraries/hooks/useRemoveCoverPicture';
import { type Article } from 'src/pages/dashboard/HuLibraries/types';
import { handleAction } from 'src/utils/events';
import { useLokaliseTranslation } from 'src/utils/i18n';

export type RemoveCoverPictureModalProps = {
  article: Article;
  onClose: () => void;
  onSuccess?: () => void;
};

const RemoveCoverPictureModal = ({
  article,
  onClose,
  onSuccess = () => null,
}: RemoveCoverPictureModalProps) => {
  const { t } = useLokaliseTranslation();

  const removeCoverPicture = useRemoveCoverPicture(article);

  const handleConfirm = () =>
    removeCoverPicture.mutate(undefined, {
      onSuccess: () => {
        onSuccess();
        onClose();
      },
    });

  return (
    <Dialog
      onClose={onClose}
      title={t('general:cover_picture.delete.confirm.title')}
      textBody={t('general:cover_picture.delete.confirm.description')}
      primaryButtonProps={{
        loading: removeCoverPicture.isLoading,
        disabled: removeCoverPicture.isLoading,
        children: t('general:cover_picture.delete.title'),
        onClick: handleAction(handleConfirm),
      }}
      secondaryButtonProps={{
        children: t('general:cancel'),
        disabled: removeCoverPicture.isLoading,
        onClick: handleAction(onClose),
      }}
    />
  );
};

export default RemoveCoverPictureModal;