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

import ChevronLeftIcon from "@mui/icons-material/ChevronLeft";
import ChevronRightIcon from "@mui/icons-material/ChevronRight";
const drawerWidth = 240;

const Drawer = styled(MuiDrawer)({
	width: drawerWidth,
	flexShrink: 0,
	boxSizing: "border-box",

	[`& .${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 (
		<Box sx={{ position: "relative" }}>
			<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: "#000000",
						width: open ? 250 : 80,
						transition: "all 0.5s ease",
						borderTopRightRadius: 16,
						borderBottomRightRadius: 16,
					},
				}}
			>
				<Box
					sx={{
						display: "flex",
						flexDirection: "row",
						justifyContent: "center",
						alignItems: "center",
						pt: 2,
					}}
				>
					<img
						src={open ? "/evLogo.png" : "/Digiev.png"}
						alt="Logo"
						style={{
							width: open ? "120px" : "60px",
							height: "auto",
							transition: "all 0.3s ease",
						}}
					/>
					{/* <img
						src={open ? "/evLogo.png" : "/evIcon.png"}
						alt="Logo"
						style={{
							width: open ? "120px" : "60px",
							height: "auto",
							transition: "all 0.3s ease",
						}}
					/> */}

					{/* <Avatar
					alt="Logo"
					src="/evLogo.png"
					sx={{
						width: "100%",
						height: "100%",
					}}
				/> */}
					{/* <Box
					sx={{
						display: open ? "flex" : "none",
						flexDirection: "column",
						alignItems: "center",
						pt: 2,
						textAlign: "center",
					}}
				>
					
					<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>
			<Button
				onClick={() => setOpen(!open)}
				sx={{
					position: "absolute",
					top: 80,
					left: open ? 235 : 65, // Slight overlap on edge
					minWidth: 0,
					width: 36,
					height: 36,
					borderRadius: "50%",
					backgroundColor: "#FFFFFF",
					color: "#000000",
					zIndex: 1301,
					boxShadow: 3,
					border: "1px solid #e0e0e0",
					transition: "all 0.3s ease-in-out",
					"&:hover": {
						backgroundColor: "#f5f5f5",
					},
				}}
			>
				{open ? (
					<ChevronLeftIcon fontSize="small" />
				) : (
					<ChevronRightIcon fontSize="small" />
				)}
			</Button>
		</Box>
	);
}
