import {useState} from 'react';
import { Link } from 'react-router-dom';
import {AppBar, Box, Button, Drawer, IconButton, List, ListItem, ListItemButton, ListItemText, Toolbar} from '@mui/material';
import {Menu} from '@mui/icons-material';

export default function NavBar({ isLoggedIn, pages, logout }) {
  const drawerWidth = 200;

  const [mobileOpen, setMobileOpen] = useState(false);

  const handleDrawerToggle = () => {
    setMobileOpen(!mobileOpen);
  };

  return isLoggedIn &&
    <Box sx={{ display: 'flex' }}>
      <AppBar
        component='nav'
        sx={{position: 'initial'}}>
        <Toolbar>
          <IconButton
            color="inherit"
            aria-label="open drawer"
            edge="start"
            onClick={handleDrawerToggle}
            sx={{ mr: 2, display: { sm: 'none' } }}
          >
            <Menu />
          </IconButton>
          <Box sx={{ display: { xs: 'none', sm: 'block' } }}>
            {pages.map(p => 
              p.hidden || 
<Link key={p.link} to={p.link} style={{textDecorationLine:'none'}}>
  <Button key={p.label} sx={{ textDecorationLine:'none', color: '#ffffff' }}>
    {p.label}
  </Button>
</Link>
            )}
            <Button onClick={logout} sx={{color:'#ffffff'}}>
            Logout
            </Button>
          </Box>
        </Toolbar>
      </AppBar>


      <Box component="nav">
        <Drawer
          sx={{
            width: drawerWidth,
            flexShrink: 0,
            '& .MuiDrawer-paper': {
              width: drawerWidth,
              boxSizing: 'border-box',
            },

            display: { xs: 'block', sm: 'none' },
          }}
          variant='temporary'
          anchor='left'
          open={mobileOpen}
          onClose={handleDrawerToggle}
          ModalProps={{
            keepMounted:true,
          }}
        >
          <Box onClick={handleDrawerToggle} sx={{ textAlign: 'center' }}>
            <List>
              {pages.map(({label, link, hidden}) => (
                hidden ? <div key={link}></div> :
                  <ListItem key={link} disablePadding>

                    <Link to={link} style={{textDecorationLine:'none', width: '100%'}}>
                      <ListItemButton
                        key={label}
                        sx={{
                          width:'100%',
                          color: 'primary.main',
                          textAlign: 'left',
                        }}
                      >
                        <ListItemText primary={label} sx={{ width:'100%'}} />
                      </ListItemButton>
                    </Link>
                  </ListItem>
              ))}
              <ListItem disablePadding>
                <ListItemButton
                  onClick={logout}
                  sx={{width:'100%', color: 'primary.main' }}
                >
                  <ListItemText primary={'Logout'}/>
                </ListItemButton>
              </ListItem>
            </List>
          </Box>
        </Drawer>
      </Box>
    </Box>;
}