import { Button } from '@mui/material';

import useUnsavedChangesGuard from '../../hooks/useUnsavedChangesGuard';
import CommonDialog from './Dialog';

type Props = {
  isDirty: boolean;
  title?: string;
  message?: string;
  confirmText?: string;
  cancelText?: string;
};

const UnsavedChangesDialog = ({
  isDirty,
  title = 'Unsaved changes',
  message = 'You have unsaved changes. If you continue without saving, the changes will be lost.',
  confirmText = 'Leave',
  cancelText = 'Go back',
}: Props) => {
  const { pending, confirmLeave, cancelLeave } = useUnsavedChangesGuard(isDirty);
  return (
    <CommonDialog
      open={pending}
      onClose={cancelLeave}
      title={title}
      size="sm"
      fullWidth
      actionButtons={
        <>
          <Button onClick={cancelLeave} variant="outlined" color="inherit" sx={{ mr: 1 }}>
            {cancelText}
          </Button>
          <Button onClick={confirmLeave} variant="contained" color="error" autoFocus>
            {confirmText}
          </Button>
        </>
      }
    >
      {message}
    </CommonDialog>
  );
};

export default UnsavedChangesDialog;
