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

import ReferenceCodePopupDialogCotents from './ReferenceCodePopupDialogCotents';

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

function SimpleDialog(props) {

  const classes = useStyles();

  const { onClose, open } = props;
  
  
  const handleClose = () => {
    onClose();
  };

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

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

export default function ReferenceCodePopupDialog({open, setOpen}) {

  const handleClose = () => {
    setOpen(false);
  };

  return (
    <div>
      <SimpleDialog
        open={open}
        onClose={handleClose}
      />
    </div>
  );
}