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

import { type LearningCertificateListItem } from '../../types';

import CertificatePreviewDialog from './CertificatePreviewDialog';

const getPreviewDialogId = (certificateId: number) =>
  `certificate-preview-${certificateId}`;

export const useCertificatePreviewDialog = () => {
  const { openDialog, closeDialog } = useDialogLayer();

  const openPreviewDialog = ({
    certificate,
  }: {
    certificate: LearningCertificateListItem;
  }) => {
    const dialogId = getPreviewDialogId(certificate.id);
    const handleClose = () => closeDialog(dialogId);

    openDialog(
      {
        content: (
          <CertificatePreviewDialog
            certificate={certificate}
            onClose={handleClose}
          />
        ),
        dialogProps: {
          fullWidth: true,
          sx: { '& .MuiDialogContent-root': { minHeight: 'min-content' } },
        },
      },
      dialogId,
    );
  };

  return { openPreviewDialog };
};
