import { useMemo, useState } from 'react';
import { QRCodeSVG } from 'qrcode.react';

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

import Transitions from 'components/@extended/Transitions';
import { MdOutlineQrCode2 } from 'react-icons/md';

// 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,
  BellOutlined
} 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';
import { useSelector } from 'react-redux';

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

const HeaderContent = () => {
  const matchesXs = useMediaQuery((theme) => theme.breakpoints.down('md'));
  const isBelow400 = useMediaQuery((theme) => theme.breakpoints.up('400'));
  const isBelow500 = useMediaQuery((theme) => theme.breakpoints.up('500'));
  const [scanDialog, setScanDialog] = useState(false);

  const userdata = useSelector((state) => state.userinfo.userdata);

  // 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);
  };

  const ellipsisStyles = {
    ml: 2,
    maxWidth: {
      xs: '150px', // Apply ellipsis on small screens
      sm: '100%' // Show full text on >= sm
    },
    whiteSpace: {
      xs: 'nowrap'
    },
    overflow: {
      xs: 'hidden',
      sm: 'visible'
    },
    textOverflow: {
      xs: 'ellipsis',
      sm: 'unset'
    },
    display: 'block'
  };

  return (
    <>
      {/* {!matchesXs && <Search />} */}
      <Stack width="100%" direction="row" justifyContent="space-between" spacing={2} alignItems="center" sx={{}}>
        <Stack direction="row" alignItems="center">
          <Typography variant="h5" sx={{ ...ellipsisStyles, color: '#fff' }}>
            {isBelow500 && userdata?.tenantname}
          </Typography>
          <Typography variant="h6" sx={{ ...ellipsisStyles, color: '#fff' }}>
            {`(${isBelow500 && userdata?.locationname})`}
          </Typography>
        </Stack>

        <Stack direction={'row'} spacing={2}>
          {/* <Box sx={{ flexShrink: 0, ml: 0.75 }}>
            <Tooltip title="Create Menu" placement="left">
              <IconButton
                sx={{
                  color: '#fff',
                  fontSize: '20px',

                  bgcolor: 'transparent'
                }}
                aria-label="open profile"
                aria-haspopup="true"
                onClick={handleToggle}
              >
                <WindowsOutlined />
              </IconButton>
            </Tooltip>
            <Popper
              open={open}
              placement="bottom"
              anchorEl={anchorEl}
              role={undefined}
              disablePortal
              popperOptions={{
                modifiers: [
                  {
                    name: 'offset',
                    options: {
                      offset: 0
                    }
                  }
                ]
              }}
              sx={{
                p: 0,
                zIndex: 5000,
                boxShadow: theme.customShadows.z1
              }}
            >
              <Transitions type="grow" position="top" sx={{ overflow: 'hidden' }} in={open}>
                <Box sx={{}}>
                  <ClickAwayListener onClickAway={handleClickAway}>
                    <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 === '/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>
                    </List>
                  </ClickAwayListener>
                </Box>
              </Transitions>
            </Popper>
          </Box> */}

          <Notification />

          {/* <Message /> */}
          {/* {!matchesXs && <Profile />}
      {matchesXs && <MobileSection />} */}
          <IconButton
            onClick={() => setScanDialog(true)}
            sx={{
              color: '#fff',
              fontSize: '20px',
              ':hover': {
                bgcolor: 'transparent',
                color: '#fff'
              }
            }}
          >
            <MdOutlineQrCode2 />
          </IconButton>
          <Tooltip title="Notifications">
            <Profile />
          </Tooltip>
        </Stack>
      </Stack>

      <Dialog
        open={scanDialog}
        onClose={() => setScanDialog(false)}
        maxWidth="sm"
        fullWidth
        PaperProps={{
          sx: {
            borderRadius: 3,
            p: 2
          }
        }}
      >
        {/* Title */}
        <DialogTitle
          sx={{
            textAlign: 'center',
            // color: '#662582',
            fontWeight: 700,
            fontSize: '1.5rem',
            letterSpacing: 0.5
          }}
        >
          <h3>
            {userdata?.tenantname}( {userdata?.locationname})
          </h3>
        </DialogTitle>

        {/* QR Code Content */}
        <DialogContent>
          <Box display="flex" justifyContent="center" alignItems="center" flexDirection="column" py={2}>
            <QRCodeSVG
              value={JSON.stringify({
                tenantid: userdata?.tenantid,
                locationid: userdata?.locationid
              })}
              size={280}
              bgColor="#ffffff"
              fgColor="#662582"
              level="Q"
              includeMargin={true}
            />
            <Typography
              sx={{
                mt: 2,
                color: '#662582',
                fontWeight: 500,
                fontSize: '0.95rem'
              }}
            >
              Scan this code to became a customer
            </Typography>
          </Box>
        </DialogContent>

        {/* Actions */}
        <DialogActions sx={{ justifyContent: 'center', pb: 2 }}>
          <Button
            onClick={() => setScanDialog(false)}
            variant="contained"
            sx={{
              backgroundColor: '#662582',
              textTransform: 'none',
              borderRadius: 2,
              px: 3,
              '&:hover': { backgroundColor: '#531c68' }
            }}
          >
            Close
          </Button>
        </DialogActions>
      </Dialog>
    </>
  );
};

export default HeaderContent;
