import React from "react";
import Modal from "react-modal";
import wrongSign from "../../assets/images/wrongSign.png";
import ReactDOM from 'react-dom';
const customStyles = {
  content: {
    top: "50%",
    left: "50%",
    right: "auto",
    bottom: "auto",
    marginRight: "-50%",
    border: "none",

    transform: "translate(-50%, -50%)",
  },
};

// Make sure to bind modal to your appElement (http://reactcommunity.org/react-modal/accessibility/)
Modal.setAppElement("#root");

function JoinModal({modalState, modalIsOpen,closeModal,JoinExam}) {

  //console.log('modalState',modalState);



  return (
    <div>

      <Modal
        isOpen={modalIsOpen}
        onRequestClose={closeModal}
        style={customStyles}
        contentLabel="Example Modal"
      >
        <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>
      </Modal>
    </div>
  );
}

export default JoinModal;