import { Modal as MuiModal } from '@mui/material'
import Box from '@mui/material/Box'
import Button from '@mui/material/Button'
import CircularProgress from '@mui/material/CircularProgress'
import _map from 'lodash/map'
import React, { FC } from 'react'

export interface Action {
  id: string;
  label: string;
  onClick: () => void;
  disabled?: boolean;
  loading?: boolean;
  variant?: "text" | "contained" | "outlined";
}

interface Props {
  onClose?: () => void;
  actions: Action[];
  modalClassName?: string;
}

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 Modal: FC<Props> = ({
  onClose,
  actions = [],
  children,
  modalClassName = '',
}) => (
  <MuiModal
    open={true}
    onClose={onClose}
    aria-labelledby="modal-modal-title"
    aria-describedby="modal-modal-description"
    className={`confirm-modal ${modalClassName}`}
  >
    <Box style={style}>
      <div className="modal-body">{children}</div>
      <div className="footer">
        {_map(actions, (action: Action) => (
          <Button
            key={action.id}
            onClick={action.onClick}
            disabled={action.disabled || action.loading}
            variant={action.variant || "text"}
          >
            {action.loading ? <CircularProgress size="22px" /> : action.label}
          </Button>
        ))}
      </div>
    </Box>
  </MuiModal>
)

export default Modal