import { Box, Button, Modal, Typography } from "@mui/material";
import CloseIcon from "@mui/icons-material/Close";
import { CustomIconButton } from "../../AddUserModal/styled.css";

type Props = {
	open: boolean;
	setLogoutModal: Function;
	handlelogout: any;
};

const style = {
	position: "absolute",
	top: "50%",
	left: "50%",
	transform: "translate(-50%, -50%)",
	width: 330,
	bgcolor: "#000000",
	borderRadius: 1.5,
	boxShadow: 24,
	p: 3,
};

const btnStyle = {
	py: 1,
	px: 5,
	width: "50%",
	textTransform: "capitalize",
	backgroundColor: "#D0E1E9",
	color: "#000000",
};
const btnStyleCancel = {
	py: 1,
	px: 5,
	width: "50%",
	textTransform: "capitalize",
};

export default function LogoutModal({
	open,
	setLogoutModal,
	handlelogout,
}: Props) {
	// Function to prevent closing the modal when clicking outside
	const handleClose = (event: React.SyntheticEvent) => {
		// Close only when clicking the close button, not the backdrop
		setLogoutModal(false);
	};

	return (
		<Modal
			open={open}
			onClose={(event, reason) => {
				if (reason !== "backdropClick") {
					setLogoutModal(false);
				}
			}}
			aria-labelledby="modal-modal-title"
			aria-describedby="modal-modal-description"
			disableEscapeKeyDown // Prevent closing with the ESC key
			BackdropProps={{
				invisible: true, // Use to control backdrop visibility
			}}
		>
			<Box sx={style}>
				<Typography
					id="modal-title"
					variant="h5"
					fontWeight="bold"
					sx={{ width: "100%" }}
				>
					<Box
						sx={{
							display: "flex",
							alignItems: "center",
							justifyContent: "space-between",
							width: "100%",
						}}
					>
						<Box
							sx={{
								flex: 1,
								textAlign: "center",
								color: "#D0E1E9",
							}}
						>
							Logout
						</Box>
						<Box
							sx={{
								cursor: "pointer",
								display: "flex",
								alignItems: "center",
							}}
						>
							<CustomIconButton
								onClick={() => setLogoutModal(false)}
								aria-label="Close"
							>
								<CloseIcon />
							</CustomIconButton>
						</Box>
					</Box>
				</Typography>
				<Typography
					id="modal-modal-description"
					sx={{ mt: 2 }}
					align="center"
					color="#D0E1E9"
				>
					Are you sure you want to Logout?
				</Typography>
				<Box
					sx={{
						display: "flex",
						justifyContent: "space-between",
						mt: 4,
						gap: 2,
					}}
				>
					<Button
						type="button"
						sx={btnStyle}
						onClick={() => setLogoutModal(false)}
					>
						Cancel
					</Button>
					<Button
						type="button"
						variant="contained"
						color="error"
						sx={btnStyleCancel}
						onClick={() => handlelogout()}
					>
						Logout
					</Button>
				</Box>
			</Box>
		</Modal>
	);
}
