import List from "@mui/material/List";
import ListItem from "@mui/material/ListItem";
import ListItemButton from "@mui/material/ListItemButton";
import ListItemIcon from "@mui/material/ListItemIcon";
import ListItemText from "@mui/material/ListItemText";
import Stack from "@mui/material/Stack";
import HomeRoundedIcon from "@mui/icons-material/HomeRounded";
import AnalyticsRoundedIcon from "@mui/icons-material/AnalyticsRounded";
import FormatListBulletedIcon from "@mui/icons-material/FormatListBulleted";
import { Link, useLocation } from "react-router-dom";
import { useSelector } from "react-redux";
import { RootState } from "../../redux/store/store";
import DashboardOutlinedIcon from "@mui/icons-material/DashboardOutlined";
import ManageAccountsOutlinedIcon from "@mui/icons-material/ManageAccountsOutlined";

//Eknoor singh and Jaanvi
//date:- 12-Feb-2025
//Made a different variable for super admin to access all the details.

type PropType = {
	hidden: boolean;
};

export default function MenuContent({ hidden }: PropType) {
	const location = useLocation();
	const userRole = useSelector(
		(state: RootState) => state.profileReducer.user?.userType
	);
	const baseMenuItems = [
		{
			text: "Dashboard",
			icon: <DashboardOutlinedIcon />,
			url: "/panel/dashboard",
		},
		userRole === "superadmin" && {
			text: "Admins",
			icon: <AnalyticsRoundedIcon />,
			url: "/panel/admin-list",
		},
		userRole === "admin" && {
			text: "Users",
			icon: <AnalyticsRoundedIcon />,
			url: "/panel/user-list",
		},
		userRole === "superadmin" && {
			text: "Roles",
			icon: <AnalyticsRoundedIcon />,
			url: "/panel/role-list",
		},
		userRole === "admin" && {
			text: "Vehicles",
			icon: <AnalyticsRoundedIcon />,
			url: "/panel/vehicle-list",
		},
	];

	const filteredMenuItems = baseMenuItems.filter(Boolean);
	return (
		<Stack sx={{ flexGrow: 1, p: 1, justifyContent: "space-between" }}>
			<List dense>
				{filteredMenuItems.map((item, index) => (
					<ListItem
						key={index}
						disablePadding
						sx={{ display: "block", py: 1 }}
					>
						{/* Wrap ListItemButton with Link to enable routing */}
						<ListItemButton
							component={Link}
							to={item.url}
							selected={item.url === location.pathname}
							sx={{ alignItems: "center", columnGap: 1 }}
						>
							<ListItemIcon
								sx={{
									minWidth: "fit-content",
									".MuiSvgIcon-root": {
										fontSize: 24,
									},
								}}
							>
								{item.icon}
							</ListItemIcon>
							<ListItemText
								sx={{
									display: !hidden ? "none" : "",
									transition: "all 0.5s ease",
									".MuiListItemText-primary": {
										fontSize: "16px",
									},
								}}
								primary={item.text}
							/>
						</ListItemButton>
					</ListItem>
				))}
			</List>
		</Stack>
	);
}