import { useMemo, useState } from "react";

// material-ui
import {
  Box,
  useMediaQuery,
  Stack,
  Typography,
  Tooltip,
  IconButton,
  Popper,
  ClickAwayListener,
  List,
  ListItem,
  ListItemButton,
  ListItemText,
  Grid,
  ListItemIcon,
} from "@mui/material";

// project import
import Search from "./Search";
import Message from "./Message";
import Profile from "./Profile";
import Notification from "./Notification";
import MobileSection from "./MobileSection";
import MegaMenuSection from "./MegaMenuSection";
import { useTheme } from "@mui/material/styles";
import { useNavigate } from "react-router";
import {
  MailOutlined,
  // DashboardOutlined,
  UserOutlined,
  CustomerServiceOutlined,
  WindowsOutlined,
} from "@ant-design/icons";
import Transitions from "components/@extended/Transitions";
import SportsMotorsportsOutlinedIcon from "@mui/icons-material/SportsMotorsportsOutlined";
import { MdDirectionsBike } from "react-icons/md";

// ==============================|| HEADER - CONTENT ||============================== //

const HeaderContent = () => {
  const matchesXs = useMediaQuery((theme) => theme.breakpoints.down("md"));

  // eslint-disable-next-line react-hooks/exhaustive-deps
  const megaMenu = useMemo(() => <MegaMenuSection />, []);

  const [open, setOpen] = useState(false);
  const [anchorEl, setAnchorEl] = useState(null);
  const theme = useTheme();
  // eslint-disable-next-line react-hooks/exhaustive-deps
  // const megaMenu = useMemo(() => <MegaMenuSection />, []);
  const iconBackColorOpen = "grey.300";
  const iconBackColor = "grey.100";
  const navigate = useNavigate();

  const handleToggle = (e) => {
    setOpen(!open);
    setAnchorEl(e.currentTarget);
  };
  const handleClickAway = () => {
    setOpen(false);
  };

  return (
    <div
      style={{
        display: "flex",
        justifyContent: "space-between",
        width: "100%",
        alignItems: "center",
      }}
    >
      <Typography variant="h4" sx={{ color: "white", ml: 2, width: "100%" }}>
        Nearlexpress Admin
      </Typography>
      {/* {!matchesXs && <Search />} */}
      <Stack
        width="100%"
        direction="row"
        justifyContent="flex-end"
        spacing={2}
        alignItems="center"
        sx={{ bgcolor: "" }}
      >
        {/* {!matchesXs && megaMenu} */}
        {matchesXs && <Box sx={{ width: "100%", ml: 1 }} />}

        <Box sx={{ flexShrink: 0, ml: 0.75 }}>
          <Tooltip title="Quick Menu" placement="left-start">
            <IconButton
              // color="secondary"
              // variant="light"
              // sx={{
              //   color: 'text.primary',
              //   bgcolor: open ? iconBackColorOpen : iconBackColor
              // }}
              sx={{
                color: "#fff",
                fontSize: "20px",
                //  bgcolor: open ? iconBackColorOpen : iconBackColor
                bgcolor: "transparent",
                // border:'1px solid #fff'
              }}
              aria-label="open profile"
              // ref={anchorRef}
              // aria-controls={open ? 'profile-grow' : undefined}
              aria-haspopup="true"
              onClick={handleToggle}
            >
              <WindowsOutlined />
            </IconButton>
          </Tooltip>
          <Popper
            open={open}
            placement="bottom"
            anchorEl={anchorEl}
            role={undefined}
            // transition
            disablePortal
            popperOptions={{
              modifiers: [
                {
                  name: "offset",
                  options: {
                    offset: 0,
                  },
                },
              ],
            }}
            sx={{
              // backgroundColor:'white',
              // border:1,
              p: 0,
              zIndex: 5000,
              boxShadow: theme.customShadows.z1,
            }}
          >
            <Transitions
              type="grow"
              position="top"
              sx={{ overflow: "hidden" }}
              in={open}
            >
              {/* <Box sx={{
                backgroundColor: 'white',
                border: '1px solid #e0e0e0 !important',
                borderRadius: 1,
              }}> */}
              <Box
                sx={
                  {
                    //  boxShadow: theme.customShadows.z1,
                  }
                }
              >
                <ClickAwayListener onClickAway={handleClickAway}>
                  {/* <List disablePadding> */}
                  <List
                    component="nav"
                    sx={{
                      p: 0,
                      width: "100%",
                      minWidth: 200,
                      maxWidth: 290,
                      bgcolor: theme.palette.background.paper,
                      borderRadius: 0.5,

                      [theme.breakpoints.down("md")]: {
                        maxWidth: 250,
                      },
                    }}
                  >
                    {/* <ListItemButton selected={location.pathname === '/orders/create'} onClick={() => {
                      navigate('/orders/create')
                      handleClickAway()
                    }} >
                      <ListItemText
                        primary={
                          <Grid container>
                            <ListItemIcon sx={{ mr: 1, fontSize: '20px' }}>
                              <MailOutlined />
                            </ListItemIcon>
                            <Typography color="textPrimary">Create Order</Typography>

                          </Grid>
                        }
                      />
                    </ListItemButton> */}
                    {/* <ListItemButton
                      selected={location.pathname === '/clients/create'}
                      onClick={() => {
                        navigate('/clients/create')
                        handleClickAway()
                      }} >
                      <ListItemText
                        primary={
                          <Grid container>
                            <ListItemIcon sx={{ mr: 1, fontSize: '20px' }}>
                              <CustomerServiceOutlined />
                            </ListItemIcon>
                            <Typography color="textPrimary">Create Client</Typography>

                          </Grid>
                        }
                      />
                    </ListItemButton> */}
                    <ListItemButton
                      selected={window.location.pathname === "/riders/create"}
                      onClick={() => {
                        navigate("/riders/create");
                        handleClickAway();
                      }}
                    >
                      <ListItemText
                        primary={
                          <Grid container>
                            <ListItemIcon sx={{ mr: 1, fontSize: "20px" }}>
                              <MdDirectionsBike />
                            </ListItemIcon>
                            <Typography color="textPrimary">
                              Create Rider
                            </Typography>
                          </Grid>
                        }
                      />
                    </ListItemButton>

                    {/* <ListItem disablePadding>
                      <ListItemButton sx={{ p: 2 }} onClick={() => {
                        navigate('/create_order')
                        handleClickAway()
                      }}>
                        <ListItemIcon sx={{ mr: 1, fontSize: '20px' }}>
                          <MailOutlined />
                        </ListItemIcon>
                        <ListItemText primary="Create Order" />
                      </ListItemButton>
                    </ListItem>

                    <ListItem disablePadding>
                      <ListItemButton sx={{ p: 2 }} onClick={() => {
                        navigate('/create_client')
                        handleClickAway()
                      }}>
                        <ListItemIcon sx={{ mr: 1, fontSize: '20px' }}>
                          <CustomerServiceOutlined />

                        </ListItemIcon>
                        <ListItemText primary="Create Client" />
                      </ListItemButton>
                    </ListItem>
                    <ListItem disablePadding>
                      <ListItemButton sx={{ p: 2 }} onClick={() => {
                        navigate('/create_staff')
                        handleClickAway()
                      }}>
                        <ListItemIcon sx={{ mr: 1, fontSize: '20px' }}>
                          <UserOutlined />
                        </ListItemIcon>
                        <ListItemText primary="Create Staff" />
                      </ListItemButton>
                    </ListItem> */}
                  </List>
                </ClickAwayListener>
                {/* </Box> */}
              </Box>
            </Transitions>
          </Popper>
        </Box>

        {/* <Notification /> */}
        {/* <Message /> */}
        {/* {megaMenu} */}
        {!matchesXs && <Profile />}
        {matchesXs && <MobileSection />}
      </Stack>
    </div>
  );
};

export default HeaderContent;
