import * as React from "react";
import { styled } from "@mui/material/styles";
import AppBar from "@mui/material/AppBar";
import Box from "@mui/material/Box";
import Stack from "@mui/material/Stack";
import MuiToolbar from "@mui/material/Toolbar";
import { tabsClasses } from "@mui/material/Tabs";
import Typography from "@mui/material/Typography";
import MenuRoundedIcon from "@mui/icons-material/MenuRounded";
import DashboardRoundedIcon from "@mui/icons-material/DashboardRounded";
import ColorModeIconDropdown from "../../shared-theme/ColorModeIconDropdown";
import { useDispatch, useSelector } from "react-redux";
import { AppDispatch, RootState } from "../../redux/store/store";
import { fetchAdminProfile } from "../../redux/slices/profileSlice";
import NotificationsNoneIcon from "@mui/icons-material/NotificationsNone";
import InputBase from "@mui/material/InputBase";
import SearchIcon from "@mui/icons-material/Search";
import MenuButton from "../MenuButton";
import SideMenuMobile from "../SideMenuMobile";
import { Avatar } from "@mui/material";
import OptionsMenu from "../OptionsMenu";

const Toolbar = styled(MuiToolbar)({
	width: "100%",
	padding: "12px",
	display: "flex",
	flexDirection: "column",
	alignItems: "start",
	justifyContent: "center",
	gap: "12px",
	flexShrink: 0,
	[`& ${tabsClasses.flexContainer}`]: {
		gap: "8px",
		p: "8px",
		pb: 0,
	},
});

export default function AppNavbar() {
	const [open, setOpen] = React.useState(false);
	const [showNotifications, setShowNotifications] = React.useState(false);
	const toggleNotifications = () => {
		setShowNotifications((prev) => !prev);
	};

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

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

	return (
		<AppBar
			position="fixed"
			sx={{
				display: { xs: "auto", md: "none" },
				boxShadow: 0,
				backgroundColor: "#1C1C1C",
				backgroundImage: "none",
				borderBottom: "1px solid",
				borderColor: "divider",
				top: "var(--template-frame-height, 0px)",
			}}
		>
			<Toolbar variant="regular">
				<Stack
					direction="row"
					sx={{
						alignItems: "center",
						flexGrow: 1,
						width: "100%",
						gap: 1,
					}}
				>
					<Stack
						direction="row"
						spacing={1}
						sx={{ justifyContent: "center", mr: "auto" }}
					>
						<CustomIcon />
						{/* <Typography
							variant="h4"
							component="h1"
							sx={{ color: "#202020" }}
						>
							Dashboard
						</Typography> */}
					</Stack>
					<Box
						sx={{
							// width: { xs: "100%", sm: "360px" },
							height: "40px",

							borderRadius: "8px",
							border: "1px solid #424242",
							display: {
								md: "none",
								xs: "flex",
								sm: "flex",
								lg: "none",
							},
							alignItems: "center",
							padding: "0 12px",
						}}
					>
						<SearchIcon sx={{ color: "#FFFFFF" }} />
						<InputBase
							sx={{
								marginLeft: 1,
								flex: 1,
								color: "#FFFFFF",
								fontSize: { xs: "12px", sm: "14px" },
							}}
						/>
					</Box>
					<Stack
						direction="row"
						spacing={2}
						alignItems="center"
						sx={{
							pointer: "cursor",
							display: { xs: "none", sm: "flex" }, // Hide on mobile, show on larger screens
						}}
					>
						<NotificationsNoneIcon
							sx={{ cursor: "pointer" }}
							onClick={toggleNotifications}
						/>
						<Avatar
							alt="User Avatar"
							src="/avatar.png"
							sx={{ width: 36, height: 36 }}
						/>
						<Typography variant="body1" sx={{ color: "#FFFFFF" }}>
							{user?.name || "No Adminsss"}
						</Typography>

						<OptionsMenu />
					</Stack>
					{/* <ColorModeIconDropdown /> */}
					<MenuButton aria-label="menu" onClick={toggleDrawer(true)}>
						<MenuRoundedIcon />
					</MenuButton>

					<SideMenuMobile open={open} toggleDrawer={toggleDrawer} />
				</Stack>
			</Toolbar>
		</AppBar>
	);
}

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

	return (
		<Box
			sx={{
				display: "flex",
				flexDirection: "row",
				justifyContent: "center",
				alignItems: "center",
				pt: 2,
			}}
		>
			<img
				src="/evLogo.png"
				alt="Logo"
				style={{
					justifyContent: "center",
					width: open ? "120px" : "60px",
					height: "auto",
					transition: "width 0.5s ease",
					marginBottom: "10px",
				}}
			/>
		</Box>
	);
}
