import * as React from "react";
import { styled } from "@mui/material/styles";
import Divider, { dividerClasses } from "@mui/material/Divider";
import Menu from "@mui/material/Menu";
import MuiMenuItem from "@mui/material/MenuItem";
import { paperClasses } from "@mui/material/Paper";
import { listClasses } from "@mui/material/List";
import ListItemText from "@mui/material/ListItemText";
import ListItemIcon, { listItemIconClasses } from "@mui/material/ListItemIcon";
import LogoutRoundedIcon from "@mui/icons-material/LogoutRounded";
import MoreVertRoundedIcon from "@mui/icons-material/MoreVertRounded";
import MenuButton from "../MenuButton";
import { Avatar } from "@mui/material";
import { useNavigate } from "react-router-dom";
import Logout from "../LogOutFunction/LogOutFunction";

const MenuItem = styled(MuiMenuItem)({
	margin: "2px 0",
});

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);
	};
	//Eknoor singh and jaanvi
	//date:- 12-Feb-2025
	//Made a navigation page for the profile page
	const navigate = useNavigate();
	const handleProfile = () => {
		navigate("/panel/profile");
	};

	//jaanvi
	//date:- 13-Feb-2025

	return (
		<React.Fragment>
			<MenuButton
				aria-label="Open menu"
				onClick={handleClick}
				sx={{ borderColor: "transparent" }}
			>
				{avatar ? (
					<MoreVertRoundedIcon />
				) : (
					<Avatar
						sizes="small"
						alt="Super Admin"
						src="/static/images/avatar/7.jpg"
						sx={{ width: 36, height: 36 }}
					/>
				)}
			</MenuButton>
			<Menu
				anchorEl={anchorEl}
				id="menu"
				open={open}
				onClose={handleClose}
				onClick={handleClose}
				transformOrigin={{ horizontal: "right", vertical: "top" }}
				anchorOrigin={{ horizontal: "right", vertical: "bottom" }}
				sx={{
					[`& .${listClasses.root}`]: {
						padding: "4px",
					},
					[`& .${paperClasses.root}`]: {
						padding: 0,
					},
					[`& .${dividerClasses.root}`]: {
						margin: "4px -4px",
					},
				}}
			>
				<MenuItem onClick={handleProfile}>Profile</MenuItem>
				<MenuItem onClick={handleClose}>My account</MenuItem>
				<Divider />
				<MenuItem onClick={handleClose}>Add another account</MenuItem>
				<MenuItem onClick={handleClose}>Settings</MenuItem>
				<Divider />
				<MenuItem
					onClick={handleClose}
					sx={{
						[`& .${listItemIconClasses.root}`]: {
							ml: "auto",
							minWidth: 0,
						},
					}}
				>
					{/* //Eknoor singh and jaanvi
                    //date:- 13-Feb-2025
                    //Implemented logout functionality which was static previously */}

					<ListItemText
						onClick={(e) => {
							e.stopPropagation();
							setLogoutModal(true);
						}}
					>
						Logout
					</ListItemText>
					<Logout
						setLogoutModal={setLogoutModal}
						logoutModal={logoutModal}
					/>

					<ListItemIcon>
						<LogoutRoundedIcon fontSize="small" />
					</ListItemIcon>
				</MenuItem>
			</Menu>
		</React.Fragment>
	);
}
