import React, { useEffect } from 'react';
import PropTypes from 'prop-types';

import { Button, Dialog, DialogActions, DialogContent, DialogContentText, DialogTitle } from '@/mui/components';

// Sorry for many !important
// This component used in parallel with PCN modules.
// PCN uses global styles for MUI and no way to override

function ConfirmDialog({ cancelButtonText = null, onCancel = null, isOpen = false, ...props }) {
  useEffect(() => () => props.onClose?.(), []);

  return (
    <Dialog
      open={isOpen}
      onClose={props.onClose}
      aria-labelledby="alert-dialog-title"
      aria-describedby="alert-dialog-description"
    >
      <DialogTitle onClose={props.onClose} id="alert-dialog-title">
        {props.title}
      </DialogTitle>
      <DialogContent>
        <DialogContentText id="alert-dialog-description">{props.body}</DialogContentText>
      </DialogContent>
      <DialogActions>
        {cancelButtonText && (
          <Button color="primary" size="small" variant="outlined" onClick={onCancel || props.onClose}>
            {cancelButtonText}
          </Button>
        )}

        <Button size="small" color="primary" onClick={props.onConfirm}>
          {props.confirmButtonText}
        </Button>
      </DialogActions>
    </Dialog>
  );
}

ConfirmDialog.propTypes = {
  title: PropTypes.string.isRequired,
  body: PropTypes.oneOfType([PropTypes.string, PropTypes.shape({})]).isRequired,
  isOpen: PropTypes.bool,
  confirmButtonText: PropTypes.string.isRequired,
  cancelButtonText: PropTypes.string,
  onConfirm: PropTypes.func.isRequired,
  onClose: PropTypes.func.isRequired,
  onCancel: PropTypes.func,
};

export default ConfirmDialog;
