import React, { useState } from "react";
import PropTypes from "prop-types";
import { Button, MenuItem, Select } from "@mui/material";
import { Close } from '@mui/icons-material/';
import "./ConsentPopup.css";
import { consentType } from "../constants/userConstants.js";

function ConsentPopup(props) {
    const { consentTypeAction, title, message, actionMessagePositive, actionMessageNegative, onClose, onAccept, editRoleData = null, setChangedRoleId, allRoles, totalAccessUsers = null } = props
    const [selectedRole, setSelectedRole] = useState("");
    const allNewRoles = allRoles?.filter(role => role.Role_Id !== editRoleData?.Role_Id) || [];

    const handleAccept = () => {
        onAccept();
        onClose();
    }

    const handleDecline = () => {
        onClose();
    }

    const handleSelectChange = (event) => {
        setSelectedRole(event.target.value);
        setChangedRoleId(event.target.value);
    };

    

    return (
        <div>
            <div className="consent-popup">
                <div className="d-flex headingpop">
                    <h3>{title}</h3>
                    <Button onClick={onClose}>
                        <Close />
                    </Button>
                </div>
                <div className="popup-body">
                    <p>{message}</p>
                    {
                        (consentTypeAction === consentType.DeleteRole && totalAccessUsers) ? (
                        <div className="field"style={{ marginBottom: "20px" }}>
                            <div>
                                Select New Role<span className="colorRed">*</span>
                            </div>
                            <div style={{ minWidth: 120, width: "100%" }}>
                                <Select
                                    className="role-selection-input"
                                    value={selectedRole}
                                    onChange={handleSelectChange}
                                    displayEmpty
                                    inputProps={{ "aria-label": "Without label" }}
                                    style={{ width: "100%", height: "40px" }}
                                    >
                                    <MenuItem key="default" value="" selected>
                                        Select Role
                                    </MenuItem>
                                    {allNewRoles?.map((e) =>  e.Status !== "InActive" && (
                                        <MenuItem key={e.RoleName} value={e.Role_Id}>
                                        {e.RoleName}
                                        </MenuItem>
                                    ))}
                                </Select>
                            </div>
                        </div>
                        ) : null
                    }
                    <div className="popup-actions">
                        <Button variant="contained" color="primary" onClick={handleAccept} disabled={totalAccessUsers > 0 &&  !selectedRole}>
                            {actionMessagePositive || "Yes"}
                        </Button>
                        <Button variant="outlined" color="secondary" onClick={handleDecline}>
                            {actionMessageNegative || "No"}
                        </Button>
                    </div>
                </div>
            </div>
        </div>
    );
}

export default ConsentPopup;

ConsentPopup.propTypes = {
    consentTypeAction: PropTypes.string.isRequired,
    title: PropTypes.string.isRequired,
    message: PropTypes.string.isRequired,
    actionMessagePositive: PropTypes.string,
    actionMessageNegative: PropTypes.string,
    onClose: PropTypes.func.isRequired,
    onAccept: PropTypes.func.isRequired,
    editRoleData: PropTypes.object,
    setChangedRoleId: PropTypes.func,   
    totalAccessUsers: PropTypes.number,
    allRoles: PropTypes.array,
};
