import { Box, Button, Modal, Typography } from "@mui/material";
import CloseIcon from "@mui/icons-material/Close";

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

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

const btnStyle = { 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={(e, reason) =>
				reason !== "backdropClick" && setLogoutModal(false)
			} // Prevent closing on backdrop click
			aria-labelledby="modal-modal-title"
			aria-describedby="modal-modal-description"
			BackdropProps={{
				onClick: (e) => e.stopPropagation(), // Stop propagation on backdrop click to prevent closing the modal
			}}
		>
			<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" }}>Logout</Box>
						<Box
							onClick={() => setLogoutModal(false)}
							sx={{
								cursor: "pointer",
								display: "flex",
								alignItems: "center",
							}}
						>
							<CloseIcon />
						</Box>
					</Box>
				</Typography>
				<Typography
					id="modal-modal-description"
					sx={{ mt: 2 }}
					align="center"
				>
					Are you sure you want to Logout?
				</Typography>
				<Box
					sx={{
						display: "flex",
						justifyContent: "space-between",
						mt: 4,
						gap: 2,
					}}
				>
					<Button
						variant="contained"
						color="error"
						type="button"
						sx={btnStyle}
						onClick={() => setLogoutModal(false)}
					>
						Cancel
					</Button>
					<Button
						variant="contained"
						type="button"
						color="primary"
						sx={btnStyle}
						onClick={() => handlelogout()}
					>
						Logout
					</Button>
				</Box>
			</Box>
		</Modal>
	);
}
