import * as React from "react";
import Avatar from "@mui/material/Avatar";
import Button from "@mui/material/Button";
import Divider from "@mui/material/Divider";
import Drawer, { drawerClasses } from "@mui/material/Drawer";
import Stack from "@mui/material/Stack";
import Typography from "@mui/material/Typography";
import LogoutRoundedIcon from "@mui/icons-material/LogoutRounded";
import NotificationsRoundedIcon from "@mui/icons-material/NotificationsRounded";

import MenuButton from "../MenuButton";
import MenuContent from "../MenuContent";
import CardAlert from "../CardAlert/CardAlert";
import { AppDispatch, RootState } from "../../redux/store/store";
import { useDispatch, useSelector } from "react-redux";
import { fetchAdminProfile } from "../../redux/slices/profileSlice";
import Logout from "../LogOutFunction/LogOutFunction";

interface SideMenuMobileProps {
	open: boolean | undefined;
	toggleDrawer: (newOpen: boolean) => () => void;
}

export default function SideMenuMobile({
	open,
	toggleDrawer,
}: SideMenuMobileProps) {
	const dispatch = useDispatch<AppDispatch>();
	const [logoutModal, setLogoutModal] = React.useState<boolean>(false);
	const { user } = useSelector((state: RootState) => state?.profileReducer);
	// React.useEffect(() => {
	// 	dispatch(fetchAdminProfile());
	// }, [dispatch]);

	return (
		<Drawer
			anchor="right"
			open={open}
			onClose={toggleDrawer(false)}
			sx={{
				zIndex: (theme) => theme.zIndex.drawer + 1,
				[`& .${drawerClasses.paper}`]: {
					backgroundImage: "none",
					backgroundColor: "background.paper",
				},
			}}
		>
			<Stack
				sx={{
					maxWidth: "70dvw",
					height: "100%",
				}}
			>
				<Stack direction="row" sx={{ p: 2, pb: 0, gap: 1 }}>
					<Stack
						direction="row"
						sx={{ gap: 1, alignItems: "center", flexGrow: 1, p: 1 }}
					>
						<Avatar
							sizes="small"
							alt={user?.name || "User Avatar"}
							src="/static/images/avatar/7.jpg"
							sx={{ width: 24, height: 24 }}
						/>
						<Typography component="p" variant="h6">
							Super Admin
						</Typography>
					</Stack>
					{/* <MenuButton showBadge>
						<NotificationsRoundedIcon />
					</MenuButton> */}
				</Stack>
				<Divider />
				<Stack sx={{ flexGrow: 1 }}>
					<MenuContent hidden={true} />
					<Divider />
				</Stack>
				<CardAlert />
				<Stack sx={{ p: 2 }}>
					<Button
						variant="outlined"
						fullWidth
						startIcon={<LogoutRoundedIcon />}
						onClick={(e) => {
							e.stopPropagation();
							setLogoutModal(true);
						}}
						
					>
						Logout
					</Button>
					<Logout
						setLogoutModal={setLogoutModal}
						logoutModal={logoutModal}
					/>
				</Stack>
			</Stack>
		</Drawer>
	);
}
