import { ChevronRight, People, Person } from "@mui/icons-material";
import ChevronLeft from "@mui/icons-material/ChevronLeft";
import { 
  darken, 
  Divider, 
  Grid2 as Grid, 
  IconButton, 
  lighten, 
  List, 
  ListItemButton, 
  ListItemIcon, 
  ListItemText, 
  SwipeableDrawer, 
  Theme, 
  Toolbar, 
  Tooltip, 
  useTheme 
} from "@mui/material";
import classNames from "classnames";
import { useWidth } from "../hooks/useWidth";
import { makeStyles } from "@mui/styles";
import BindaptIcon from "../products/Bindapt/BindaptIcon";
import { Link, useLocation } from "react-router-dom";
import BinsIcon from "products/Bindapt/BinsIcon";
import { useGlobalState } from "providers";
import {
  // hasTutorialPlaylist,
  // IsAdaptiveAgriculture,
  // IsAdCon,
  // isBXT,
  IsMiVent,
  // IsOmniAir
} from "services/whiteLabel";
import MiningIcon from "products/ventilation/MiningIcon";
import { useAuth0 } from "@auth0/auth0-react";

const drawerWidth = 230;

const useStyles = makeStyles((theme: Theme) => ({
  sideMenu: {
    position: "fixed",
    height: "100%",
    width: drawerWidth,
    flexShrink: 0,
    whiteSpace: "nowrap",
    background: theme.palette.background.default
  },
  sideMenuOpened: {
    zIndex: theme.zIndex.drawer + 2,
    width: drawerWidth,
    transition: theme.transitions.create(["width"], {
      easing: theme.transitions.easing.sharp,
      duration: theme.transitions.duration.enteringScreen
    })
  },
  sideMenuOnClosed: {
    transition: theme.transitions.create(["width", "z-index", "opacity"], {
      easing: theme.transitions.easing.sharp,
      duration: theme.transitions.duration.leavingScreen
    }),
    overflowX: "hidden",
    width: theme.spacing(7),
    zIndex: theme.zIndex.drawer,
    opacity: 0,
    [theme.breakpoints.up("md")]: {
      width: theme.spacing(9),
      opacity: 1
    }
  },
  list: {
    paddingTop: 0
  },
  listItem: {
    paddingLeft: theme.spacing(2),
    paddingRight: theme.spacing(2),
    [theme.breakpoints.up("md")]: {
      paddingLeft: theme.spacing(3),
      paddingRight: theme.spacing(3)
    },
  }, 
  activeItem:
    theme.palette.mode === "light"
      ? {
          background: darken(theme.palette.background.default, 0.25),
          "&:hover": {
            background: darken(theme.palette.background.default, 0.25)
          }
        }
      : {
          background: lighten(theme.palette.background.default, 0.25),
          "&:hover": {
            background: lighten(theme.palette.background.default, 0.25)
          }
        }
}))

interface Props {
  open: boolean;
  onOpen: () => void;
  onClose: () => void;
}
  
export default function SideNavigator(props: Props) {
  const { open, onOpen, onClose } = props;
  const { isAuthenticated } = useAuth0()
  const theme = useTheme();
  const width = useWidth();
  const classes = useStyles();
  const location = useLocation();
  const [{ user }] = useGlobalState()

  const getClasses = (page: string) => {
    if (page === "/device") {
      if (location.pathname.startsWith("/device") ||
      location.pathname.startsWith("/group")) {
        return ({
          root: `${classes.listItem} ${classes.activeItem}`
        })
      }
    }
    if (location.pathname.startsWith(page)) {
      return ({
        root: `${classes.listItem} ${classes.activeItem}`
      })
    }
    return ({
      root: `${classes.listItem}`
    })
  }

  const authenticatedSideMenu = () => {
    const isMiVent = IsMiVent();
    return (
      <List className={classes.list} component="nav">
        <Tooltip title="Bins" placement="right">
          <ListItemButton
            id="tour-dashboard"
            component={Link}
            to="/bins"
            onClick={onClose}
            classes={getClasses("/bin")}
            >
            <ListItemIcon>
              <BinsIcon height={"26px"}/>
            </ListItemIcon>
            {open && <ListItemText primary="Bins" />}
          </ListItemButton>
        </Tooltip>
        <Tooltip title="Devices" placement="right">
          <ListItemButton
            id="tour-dashboard"
            component={Link}
            to="/devices"
            onClick={onClose}
            classes={getClasses("/device")}
            >
            <ListItemIcon>
              <BindaptIcon />
            </ListItemIcon>
            {open && <ListItemText primary="Devices" />}
          </ListItemButton>
        </Tooltip>
        {(isMiVent || user.hasFeature("admin")) && (
          <Tooltip title="Mines" placement="right">
            <ListItemButton
              id="tour-dashboard"
              component={Link}
              to="/mines"
              onClick={onClose}
              classes={getClasses("/mine")}
              >
              <ListItemIcon>
                <MiningIcon height={"26px"} width={"26px"} />
              </ListItemIcon>
              {open && <ListItemText primary="Mines" />}
            </ListItemButton>
          </Tooltip>
        )}
        <Tooltip title="Teams" placement="right">
          <ListItemButton
            id="tour-dashboard"
            component={Link}
            to="/teams"
            onClick={onClose}
            classes={getClasses("/team")}
            >
            <ListItemIcon>
              <People />
            </ListItemIcon>
            {open && <ListItemText primary="Teams" />}
          </ListItemButton>
        </Tooltip>
        <Tooltip title="Users" placement="right">
          <ListItemButton
            id="tour-dashboard"
            component={Link}
            to="/users"
            onClick={onClose}
            classes={getClasses("/user")}
            >
            <ListItemIcon>
              <Person />
            </ListItemIcon>
            {open && <ListItemText primary="Users" />}
          </ListItemButton>
        </Tooltip>
      </List>
    )
  }

  return (
    <SwipeableDrawer
      variant={width === "xs" || width === "sm" ? "temporary" : "permanent"}
      classes={{
        paper: classNames(
          classes.sideMenu,
          open ? classes.sideMenuOpened : classes.sideMenuOnClosed
        )
      }}
      anchor="left"
      open={open}
      onOpen={onOpen}
      onClose={onClose}
      // disableBackdropTransition={!iOS}
      // disableDiscovery={iOS}>
      >
      <Toolbar >
        <Grid container direction="row" justifyContent={"flex-end"}>
          <Grid>
            <IconButton onClick={onClose} aria-label="onClose side menu">
              {theme.direction === "rtl" ? <ChevronRight /> : <ChevronLeft />}
            </IconButton>
          </Grid>
        </Grid>
      </Toolbar>
      <Divider />
      {/* {isAuthenticated || isOffline() ? authenticatedSideMenu() : unauthenticatedSideMenu()} */}
      {isAuthenticated && authenticatedSideMenu()}
    </SwipeableDrawer>
  );
}