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