import * as React from "react";
import { styled } from "@mui/material/styles";
import Menu from "@mui/material/Menu";
import MuiMenuItem from "@mui/material/MenuItem";
import ExpandMoreIcon from "@mui/icons-material/ExpandMore";
import Link from "@mui/material/Link";
import Logout from "../LogOutFunction/LogOutFunction";
import ListItemIcon, { listItemIconClasses } from "@mui/material/ListItemIcon";
import { ListItemText } from "@mui/material";
const MenuItem = styled(MuiMenuItem)({
	margin: "2px 10px",

	borderBottom: "none",
	"& .MuiButtonBase-root-MuiButton-root":{
		fontSize:"16px",
	}
});

export default function OptionsMenu({
	anchorEl,
	open,
	onClose,
}: {
	avatar?: boolean;
	anchorEl: HTMLElement | null;
	open: boolean;
	onClose: () => void;
}) {
	// const [anchorEl, setAnchorEl] = React.useState<null | HTMLElement>(null);
	const [logoutModal, setLogoutModal] = React.useState<boolean>(false);
	// const open = Boolean(anchorEl);
	// const handleClick = (event: React.MouseEvent<HTMLElement>) => {
	// 	setAnchorEl(event?.currentTarget);
	// };
	// const handleClose = () => {
	// 	setAnchorEl(null);
	// };

	return (
		<React.Fragment>
			{/* <ExpandMoreIcon onClick={handleClick} sx={{ cursor: "pointer" }} /> */}
			<Menu
				anchorEl={anchorEl}
				id="top-menu"
				open={open}
				onClose={onClose}
				slotProps={{
					paper: {
						elevation: 0,
						sx: {
							overflow: "visible",
							//filter: "drop-shadow(0px 2px 8px rgba(0,0,0,0.32))",
							mt: 1.5,

							"& .MuiList-root": {
								background: "#D0E1E9",
								
							},
							"& .MuiMenuItem-root": {
								borderBottom: "none", // Remove any divider under menu items
							},
						},
					},
				}}
				transformOrigin={{ horizontal: "right", vertical: "top" }}
				anchorOrigin={{ horizontal: "right", vertical: "bottom" }}
			>
				<Link
					href={"/panel/profile"}
					underline="none"
					sx={{
						"&::before": {
							display: "none",
						},
					}}
				>
					<MenuItem onClick={onClose}>Profile</MenuItem>
				</Link>
				<MenuItem onClick={onClose} sx={{ color: "#E8533B" }}>
					<ListItemText
						onClick={(e) => {
							e.stopPropagation();
							setLogoutModal(true);
						}}
						sx={{ color: "red" }}
					>
						Logout
					</ListItemText>

					<Logout
						setLogoutModal={setLogoutModal}
						logoutModal={logoutModal}
					/>
				</MenuItem>
			</Menu>
		</React.Fragment>
	);
}
