import { useMemo, useState } from 'react';

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

import Transitions from 'components/@extended/Transitions';

// 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 { useNavigate } from 'react-router';
import {
  MailOutlined,
  // DashboardOutlined,
  UserOutlined,
  CustomerServiceOutlined,
  WindowsOutlined
} from '@ant-design/icons';
import { useTheme } from '@mui/material/styles';
import { TbBoxMultiple1 } from 'react-icons/tb';
import { GrMultiple } from 'react-icons/gr';
import { FaUserPen } from 'react-icons/fa6';
import { TbUserEdit } from 'react-icons/tb';

// ==============================|| 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 (
    <>
      {/* {!matchesXs && <Search />} */}
      <Stack width="100%" direction="row" justifyContent="space-between" spacing={2} alignItems="center">
        {/* {!matchesXs && megaMenu} */}
        <Typography variant="h5" sx={{ ml: 2, color: '#fff', whiteSpace: 'nowrap' }}>
          {localStorage.getItem('fullname') || ''}
        </Typography>
        {matchesXs && <Box sx={{ width: '100%', ml: 1 }} />}
        <Stack direction={'row'} spacing={2}>
          <Box sx={{ flexShrink: 0, ml: 0.75 }}>
            <Tooltip title="Create Menu" placement="left">
              <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={() => {
                          // console.log(const location = useLocation();)
                          navigate('/orders/create');
                          handleClickAway();
                        }}
                      >
                        <ListItemText
                          primary={
                            <Grid container>
                              <ListItemIcon sx={{ mr: 1, fontSize: '20px' }}>
                                <TbBoxMultiple1 />
                              </ListItemIcon>
                              <Typography color="textPrimary">Create Order</Typography>
                            </Grid>
                          }
                        />
                      </ListItemButton>
                      <ListItemButton
                        selected={location.pathname === '/orders/create'}
                        onClick={() => {
                          // console.log(const location = useLocation();)
                          navigate('/orders/createorders');
                          handleClickAway();
                        }}
                      >
                        <ListItemText
                          primary={
                            <Grid container>
                              <ListItemIcon sx={{ mr: 1, fontSize: '20px' }}>
                                <GrMultiple />
                              </ListItemIcon>
                              <Typography color="textPrimary">Create Group 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={location.pathname === '/customers/create'}
                        onClick={() => {
                          navigate('/customers/create');
                          handleClickAway();
                        }}
                      >
                        <ListItemText
                          primary={
                            <Grid container>
                              <ListItemIcon sx={{ mr: 1, fontSize: '20px' }}>
                                <TbUserEdit />
                              </ListItemIcon>
                              <Typography color="textPrimary">Create Customer</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 /> */}
          {/* {!matchesXs && <Profile />}
      {matchesXs && <MobileSection />} */}
          <Tooltip title="Notifications">
            <Profile />
          </Tooltip>
        </Stack>
      </Stack>
    </>
  );
};

export default HeaderContent;