import { styled } from "@mui/material/styles";
import Avatar from "@mui/material/Avatar";
import MuiDrawer, { drawerClasses } from "@mui/material/Drawer";
import Box from "@mui/material/Box";
import Stack from "@mui/material/Stack";
import Typography from "@mui/material/Typography";
import MenuContent from "../MenuContent";
import OptionsMenu from "../OptionsMenu";
import { useDispatch, useSelector } from "react-redux";
import React, { useEffect } from "react";
import { ArrowLeftIcon, ArrowRightIcon } from "@mui/x-date-pickers";
import { AppDispatch, RootState } from "../../redux/store/store";
import { Button } from "@mui/material";
import { fetchAdminProfile } from "../../redux/slices/profileSlice";

const drawerWidth = 240;

const Drawer = styled(MuiDrawer)({
	width: drawerWidth,
	flexShrink: 0,
	boxSizing: "border-box",
	mt: 10,
	[`& .${drawerClasses.paper}`]: {
		width: drawerWidth,
		boxSizing: "border-box",
	},
});

export default function SideMenu() {
	const [open, setOpen] = React.useState(true);

	//Eknoor singh
	//date:- 12-Feb-2025
	//Dispatch is called with user from Authstate Interface

	const dispatch = useDispatch<AppDispatch>();
	const { user } = useSelector((state: RootState) => state?.profileReducer);

	useEffect(() => {
		dispatch(fetchAdminProfile());
	}, [dispatch]);

	return (
		<Drawer
			open={open}
			variant="permanent"
			anchor="left"
			sx={{
				display: {
					xs: "none",
					md: "block",
					width: open ? 250 : 80,
					transition: "all 0.5s ease",
				},
				[`& .${drawerClasses.paper}`]: {
					backgroundColor: "background.paper",
					width: open ? 250 : 80,
					transition: "all 0.5s ease",
				},
			}}
		>
			<Box
				sx={{
					display: "flex",
					justifyContent: open ? "flex-end" : "center",
					alignItems: "center",
					pt: 1.5,
					textAlign: "center",
				}}
			>
				<Button variant="text" onClick={() => setOpen(!open)}>
					{open ? <ArrowLeftIcon /> : <ArrowRightIcon />}
				</Button>
			</Box>
			<MenuContent hidden={open} />
			{/* <CardAlert /> */}
			<Stack
				direction="row"
				sx={{
					p: 2,
					gap: 1,
					alignItems: "center",
					borderTop: "1px solid",
					borderColor: "divider",
				}}
			>
				<Avatar
					sizes="small"
					alt={user?.name || "User Avatar"}
					src={"/static/images/avatar/7.jpg"}
					sx={{ width: open ? 36 : 0, height: open ? 36 : 0 }}
				/>
				<Box sx={{ mr: "auto", display: !open ? "none" : "block" }}>
					<Typography
						variant="body2"
						sx={{ fontWeight: 500, lineHeight: "16px" }}
					>
						{user?.name || "No Admin"}
					</Typography>
					<Typography
						variant="caption"
						sx={{ color: "text.secondary" }}
					>
						{user?.email || "No Email"}
					</Typography>
				</Box>
				<OptionsMenu avatar={open} />
			</Stack>
		</Drawer>
	);
}
