import Box from '@mui/material/Box'
import Button from '@mui/material/Button'
import CircularProgress from '@mui/material/CircularProgress'
import Modal from '@mui/material/Modal'
import _identity from 'lodash/identity'
import React, { FC } from 'react'

interface Props {
  message: string;
  loading?: boolean;
  hideCancelBtn?: boolean;
  onClose?: () => void;
  onConfirm?: () => void;
}

const style: React.CSSProperties = {
  position: 'absolute',
  top: '50%',
  left: '50%',
  transform: 'translate(-50%, -50%)',
  minWidth: 480,
  backgroundColor: '#e3e3e3',
  border: '1px solid white',
  outline: 'none',
  padding: '14px',
  maxHeight: '85vh',
  overflow: 'auto',
}

const ConfirmModal: FC<Props> = ({
  message = '',
  loading = false,
  hideCancelBtn = false,
  onClose = _identity,
  onConfirm = _identity,
}) => (
  <Modal
    open={true}
    onClose={onClose}
    aria-labelledby="modal-modal-title"
    aria-describedby="modal-modal-description"
    className="confirm-modal"
  >
    <Box style={style}>
      <p>{message}</p>
      <div className="footer">
        {!hideCancelBtn && (
          <Button onClick={onClose} disabled={loading}>
            Cancel
          </Button>
        )}
        <Button onClick={onConfirm}>
          {loading ? <CircularProgress size="22px" /> : 'OK'}
        </Button>
      </div>
    </Box>
  </Modal>
)

export default ConfirmModal