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);

	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",
					flexDirection: "row",
					alignItems: "center",
					pt: 2,
					pl: 2, 
				}}
			>
		
				<Avatar
					alt="Logo"
					src="/Digilogo.png" 
					sx={{
						width: "50px", 
						height: "50px", 
						
					}}
				/>
				<Box
					sx={{
						display: "flex",
						flexDirection: "column",
						alignItems: "center",
						pt: 2,
						textAlign: "center",
					}}
				>
					{/* Digi EV Text Section */}
					<Typography
						variant="body2"
						color="#D9D8D8"
						sx={{
							fontWeight: "bold", 
							fontSize: "16px", 
						}}
					>
						Digi EV
					</Typography>
					<Typography variant="subtitle2" color="#D9D8D8" >
						{user?.userType || "N/A"}
					</Typography>
				</Box>
				
			</Box>

			<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} />
		</Drawer>
	);
}