import React from "react";

import CreateRole from "./CreateRole";
import DeleteMaster from "./DeleteMaster";
import EditRole from "./EditRole";
import CreateJobRole from "./CreateJobRole";
import EditJobRole from "./EditJobRole";

const MasterModal = ({ modaldata ,closeModal}) => {

  return (

        <div
          className="modal fade"
          id="master-modal"
          tabIndex="-1"
          aria-hidden="true"
      role="dialog"  
      aria-labelledby="modalToggleLabel"
         >
       <div
      className={`modal-dialog  mx-sm-auto mx-1 ${
        modaldata?.modalType === "delete" ? "modal-md" : "modal-lg"
      } modal-simple ` }
    >
      <div className="modal-content">
        <div className="modal-body p-sm-4 p-0">
          <button
            type="button"
            className="btn-close"
            data-bs-dismiss="modal"
            aria-label="Close"
            onClick={closeModal}
          ></button>
          <div className="text-center mb-2"></div>
          {modaldata?.modalType === "Role" &&
           <CreateRole masmodalType={modaldata.masterType} onClose={closeModal} />}
          {modaldata?.modalType === "Edit-Role" && (
            <EditRole master={modaldata}  onClose={closeModal} />
          )}
          {modaldata?.modalType === "delete" && (
            <DeleteMaster master={modaldata} onClose={closeModal}/>
          )}
          {modaldata?.modalType === "Job Role" && (
            <CreateJobRole onClose={closeModal} />
          )}
          {modaldata?.modalType === "Edit-Job Role" && (
            <EditJobRole data ={modaldata.item} onClose={closeModal} />
          )}
       
        </div>
      </div>
    </div>
    </div>
  );
};

export default MasterModal;