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 0",
	borderBottom: "none",
});

export default function OptionsMenu({ avatar }: { avatar?: boolean }) {
	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} />
			<Menu
				anchorEl={anchorEl}
				id="top-menu"
				open={open}
				onClose={handleClose}
				onClick={handleClose}
				slotProps={{
					paper: {
						elevation: 0,
						sx: {
							overflow: "visible",
							filter: "drop-shadow(0px 2px 8px rgba(0,0,0,0.32))",
							mt: 1.5,
							"& .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={handleClose}>Profile</MenuItem>
				</Link>
				<MenuItem onClick={handleClose} sx={{ color: "#E8533B" }}>
					<ListItemText
						onClick={(e) => {
							e.stopPropagation();
							setLogoutModal(true);
						}}
						sx={{ color: "red" }}
					>
						Logout
					</ListItemText>

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