import * as React from 'react';
import PropTypes from 'prop-types';
import CircularProgress from '@mui/material/CircularProgress';
import Box from '@mui/material/Box';
import { Dialog, DialogContent, makeStyles, Theme, Typography } from "@material-ui/core";

const useStyles = makeStyles((theme) => ({
  backDrop: {
    backdropFilter: "blur(3px)",
    backgroundColor:'rgba(0,0,30,0.4)'
  },
}));

function SimpleDialog(props) {

  const { open } = props;
  const classes = useStyles();

  return (
    <Dialog open={open} disableEscapeKeyDown={false}
      BackdropProps={{
        classes: {
          root: classes.backDrop,
        },
      }}
    >
      <DialogContent style={{ textAlign: "center", background: 'rgba(0,0,0,0)' }}>
          <Box sx={{ display: 'flex', width: '100%', padding: '15px 15px' }}>
            <CircularProgress
            disableShrink={true}
            size={100}
            />
          </Box>
      </DialogContent>
    </Dialog>
  );
}

SimpleDialog.propTypes = {
  open: PropTypes.bool.isRequired,
};

export default function LoadingProgress({open, setOpen}) {
  return (
    <div>
      <SimpleDialog
        open={open}
      />
    </div>
  );
}