cker

import React from 'react';
import { makeStyles } from '@material-ui/core/styles';
import Modal from '@material-ui/core/Modal';
import wrongSign from "../../assets/images/wrongSign.png";
function rand() {
  return Math.round(Math.random() * 20) - 10;
}

function getModalStyle() {
  const top = 50 + rand();
  const left = 50 + rand();

  return {
    top: `${top}%`,
    left: `${left}%`,
    transform: `translate(-${top}%, -${left}%)`,
  };
}

const useStyles = makeStyles((theme) => ({

  paper: {
    position: 'absolute',



  },
}));






const JoinModal = ({modalState, modalIsOpen,closeModal,JoinExam}) => {


  const classes = useStyles();
  // getModalStyle is not a pure function, we roll the style only on the first render
  const [modalStyle] = React.useState(getModalStyle);
  const [open, setOpen] = React.useState(true);

  const handleOpen = () => {
    setOpen(true);
  };

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

  const body = (
    <div style={modalStyle} className={classes.paper}>
       <div
          className="card"
          style={{
            fontFamily: "Arial, Helvetica, sans-serif",
            borderRadius: "30px",
            boxShadow: "0 4px 8px 0 rgba(0,0,0,0.2)",
            transition: "0.3s",
            textAlign: "center",
            alignItems: "center",
            padding: "30px",
            border: "none",
          }}
        >
          <div style={{ color: "#3D69A8" }}>
            <h1 style={{ fontWeight: "bold" }}>Join Quiz</h1>
          </div>

          <div style={{ marginTop: "20px" }}>
            <h5>Are you sure to join in this quiz?</h5>
          </div>

          <div style={{ padding: "10px" }}>
            <button
              onClick={JoinExam}
              style={{
                fontWeight: "20px",
                borderRadius: "10px",
                marginTop: "15px",
                width: "90px",
                height: "50px",
                fontSize: "20px",
                backgroundColor: "#4067B2",
                color: "white",
              }}

            >
              YES
            </button>
          </div>
        </div>

        <div
          style={{
            marginTop: "-20px",
            borderRadius: "30px",
            backgroundColor: "#4067B2",
            boxShadow: "0 4px 8px 0 rgba(0,0,0,0.2)",
            transition: "0.3s",
            textAlign: "center",
            alignItems: "center",
            padding: "10px",
            border: "none",
          }}
        >
          <img
            onClick={() => closeModal("close")}
            src={wrongSign}
            style={{
              height: "65px",
              width: "65px",
              margin: "20px 0px",
              padding: "5px",
            }}
          ></img>
        </div>

    </div>
  );

  return (
    <div>
      <button type="button" onClick={handleOpen}>
        Open Modal
      </button>
      <Modal
        open={open}
        onClose={handleClose}
        aria-labelledby="simple-modal-title"
        aria-describedby="simple-modal-description"
      >
       {body}
      </Modal>
    </div>
  );
};

export default JoinModal;