import Dialog from '@material-hu/components/design-system/Dialog';
import { useDialogLayer } from '@material-hu/components/layers/Dialogs';

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

type UseDeleteLogoDialogProps = {
  index: number;
  onDelete: () => void;
};

const useDeleteLogoDialog = ({ index, onDelete }: UseDeleteLogoDialogProps) => {
  const { t } = useLokaliseTranslation('learning');
  const { openDialog, closeDialog } = useDialogLayer();

  const dialogId = `certificate-delete-logo-${index}`;

  const handleClose = () => closeDialog(dialogId);

  const handleConfirm = () => {
    handleClose();
    onDelete();
  };

  const openDeleteLogoDialog = () => {
    openDialog(
      {
        content: (
          <Dialog
            onClose={handleClose}
            title={t('settings.certificates.create_flow.delete_logo')}
            textBody={t(
              'settings.certificates.create_flow.delete_logo_description',
            )}
            primaryButtonProps={{
              children: t('general:delete'),
              onClick: handleConfirm,
            }}
            secondaryButtonProps={{
              children: t('general:cancel'),
              onClick: handleClose,
            }}
          />
        ),
      },
      dialogId,
    );
  };

  return { openDeleteLogoDialog };
};

export default useDeleteLogoDialog;
