import Box from '@mui/material/Box';
import SwipeableDrawer from '@mui/material/SwipeableDrawer';
import Button from '@mui/material/Button';
import List from '@mui/material/List';
import ListItem from '@mui/material/ListItem';
import ListItemButton from '@mui/material/ListItemButton';
import ListItemIcon from '@mui/material/ListItemIcon';
import ListItemText from '@mui/material/ListItemText';
import GroupIcon from '@mui/icons-material/Group';
import { FC, Fragment, KeyboardEvent, useState } from 'react';
import MenuIcon from '@mui/icons-material/Menu';
import GridViewIcon from '@mui/icons-material/GridView';
import ConstructionIcon from '@mui/icons-material/Construction';

import { Divider } from '@mui/material';
import { useNavigate } from 'react-router-dom';
import { PrivateRoutes } from '../../config/routes';

interface SidebarProps {
  drawerWidth: number;
}

export const Sidebar: FC<SidebarProps> = ({ drawerWidth }) => {
  const [isOpen, setisOpen] = useState(false);
  const navigate = useNavigate();

  const list = () => (
    <Box
      sx={{ width: drawerWidth }}
      onClick={() => setisOpen(false)}
      onKeyDown={(event: KeyboardEvent) => {
        if (event.key === 'Escape') {
          setisOpen(false);
        }
      }}
    >
      <List>
        <ListItem
          disablePadding
          onClick={() => navigate(PrivateRoutes.DASHBOARD)}
          sx={{
            '&:hover': {
              backgroundColor: 'rgba(0, 0, 0, 0.08)',
            },
          }}
        >
          <ListItemButton component='div'>
            <ListItemIcon>
              <GridViewIcon color='primary' />
            </ListItemIcon>
            <ListItemText
              sx={{
                textTransform: 'capitalize',
                color: '#90caf9',
              }}
              primary={'Dashboard'}
            />
          </ListItemButton>
        </ListItem>
        <Divider />
        <ListItem
          disablePadding
          onClick={() => navigate(PrivateRoutes.USERS)}
          sx={{
            '&:hover': {
              backgroundColor: 'rgba(0, 0, 0, 0.08)',
            },
          }}
        >
          <ListItemButton component='div'>
            <ListItemIcon>
              <GroupIcon color='primary' />
            </ListItemIcon>
            <ListItemText
              sx={{
                textTransform: 'capitalize',
                color: '#90caf9',
              }}
              primary={'Users'}
            />
          </ListItemButton>
        </ListItem>
        <Divider />
        <ListItem
          disablePadding
          onClick={() => navigate(PrivateRoutes.FAULTS)}
          sx={{
            '&:hover': {
              backgroundColor: 'rgba(0, 0, 0, 0.08)',
            },
          }}
        >
          <ListItemButton component='div'>
            <ListItemIcon>
              <ConstructionIcon color='primary' />
            </ListItemIcon>
            <ListItemText
              sx={{
                textTransform: 'capitalize',
                color: '#90caf9',
              }}
              primary={'Faults'}
            />
          </ListItemButton>
        </ListItem>
        <Divider />
      </List>
    </Box>
  );

  return (
    <div>
      <Fragment key={'left'}>
        <Button onClick={() => setisOpen(!isOpen)}>
          <MenuIcon />
        </Button>
        <SwipeableDrawer
          anchor={'left'}
          open={isOpen}
          onClose={() => setisOpen(false)}
          onOpen={() => setisOpen(true)}
        >
          {list()}
        </SwipeableDrawer>
      </Fragment>
    </div>
  );
};
