// React
import { useState } from "react";
import { Link } from "react-router-dom";
import AppBar from "@mui/material/AppBar";
import Drawer from "@mui/material/Drawer";
import Box from "@mui/material/Box";
import Typography from "@mui/material/Typography";
import Toolbar from "@mui/material/Toolbar";
import IconButton from "@mui/material/IconButton";
import Button from "@mui/material/Button";
import ListItemText from "@mui/material/ListItemText";
import List from "@mui/material/List";
import ListItemButton from "@mui/material/ListItemButton";
import useMediaQuery from "@mui/material/useMediaQuery";
import { useTheme } from "@mui/material/styles";

import MenuIcon from "@mui/icons-material/Menu";

const links = [
  // { url: "/", title: "Home" },
  { url: "/#about", title: "About" },
  { url: "/#portfolio", title: "Portfolio" },
  // { url: "/#achievements", title: "Achievements" },
  { url: "/#contact", title: "Contact" },
  { url: "/resume", title: "Resume" },
];

export default function Navbar() {
  const theme = useTheme();
  const [miniNavOpen, setMiniNavOpen] = useState();
  const miniNav = useMediaQuery(theme.breakpoints.down("md"));
  const toggleMiniNavOpen = () => setMiniNavOpen(!miniNavOpen);

  return (
    <AppBar position="fixed" sx={{ bgcolor: "black" }}>
      <Drawer open={miniNavOpen} anchor="top" onClose={toggleMiniNavOpen}>
        <AppBar position="fixed" sx={{ bgcolor: "black" }} />
        <Box sx={{ margin: "0 auto", width: "100%" }}>
          <List>
            <ListItemButton onClick={toggleMiniNavOpen}>
              {" "}
              <ListItemText sx={{ textAlign: "center" }}>Back</ListItemText>
            </ListItemButton>
            {links.map((l, i) => (
              <ListItemButton key={i} component={Link} to={l.url} onClick={toggleMiniNavOpen}>
                <ListItemText
                  sx={{ textAlign: "center" }}
                  primary={l.title.charAt(0).toUpperCase() + l.title.slice(1)}
                />
              </ListItemButton>
            ))}
          </List>
        </Box>
      </Drawer>
      <Box
        sx={{
          flexGrow: 1,
          margin: "0 auto",
          width: "100%",
          maxWidth: 1200,
          display: "block",
        }}
      >
        <Toolbar disableGutters sx={{ display: "flex", padding: "0 10px" }}>
          <a href="/">
            <IconButton size="large" edge="start" color="inherit" aria-label="menu" sx={{ mr: -0.5 }}>
              <img src="/images/logo-micro.png" width="40" height="40" />
            </IconButton>
          </a>
          <Typography variant="h6" noWrap component="div">
            Dunemask
          </Typography>
          {miniNav && (
            <Box sx={{ marginLeft: "auto" }}>
              <IconButton size="large" edge="start" color="inherit" aria-label="menu" onClick={toggleMiniNavOpen}>
                <MenuIcon />
              </IconButton>
            </Box>
          )}
          {!miniNav && (
            <Box sx={{ marginLeft: "auto" }}>
              {links.map((l, i) => (
                <Link key={i} to={l.url} style={{ textDecoration: "none" }}>
                  <Button sx={{ color: "white" }}>{l.title}</Button>
                </Link>
              ))}
            </Box>
          )}
        </Toolbar>
      </Box>
    </AppBar>
  );
}