import { useState } from "react";
import { Link, NavLink } from "react-router-dom";

import AppBar from "@mui/material/AppBar";
import Box from "@mui/material/Box";
import Toolbar from "@mui/material/Toolbar";
import IconButton from "@mui/material/IconButton";
import Typography from "@mui/material/Typography";
import Menu from "@mui/material/Menu";
import MenuIcon from "@mui/icons-material/Menu";
import MenuItem from "@mui/material/MenuItem";

const NavBar = () => {
  const [anchorElNav, setAnchorElNav] = useState(null);

  const handleOpenNavMenu = (event) => {
    setAnchorElNav(event.currentTarget);
  };

  const handleCloseNavMenu = () => {
    setAnchorElNav(null);
  };

  return (
    <AppBar position="static" style={{ background: "#23282C" }}>
      <Toolbar style={{ minHeight: "0px" }}>
        <h2 style={{ color: "#3082aa", paddingRight: "1%" }}>
          <span>FAN</span>
          <span style={{ color: "#27698a" }}>STOCK</span>
        </h2>
        <Box sx={{ flexGrow: 1, display: { xs: "flex", md: "none" } }}>
          <IconButton
            size="large"
            aria-label="account of current user"
            aria-controls="menu-appbar"
            aria-haspopup="true"
            onClick={handleOpenNavMenu}
            style={{ color: "white" }}
          >
            <MenuIcon />
          </IconButton>
          <Menu
            id="menu-appbar"
            anchorEl={anchorElNav}
            anchorOrigin={{
              vertical: "bottom",
              horizontal: "left",
            }}
            keepMounted
            transformOrigin={{
              vertical: "top",
              horizontal: "left",
            }}
            open={Boolean(anchorElNav)}
            onClose={handleCloseNavMenu}
            sx={{
              display: { xs: "block", md: "none" },
            }}
          >
            <MenuItem
              onClick={handleCloseNavMenu}
              style={{ background: "#23282C" }}
            >
              <Link to="/components">
                <Typography>Componentes</Typography>
              </Link>
            </MenuItem>
            <MenuItem
              onClick={handleCloseNavMenu}
              style={{ background: "#23282C" }}
            >
              <Link to="/">
                <Typography>Productos</Typography>
              </Link>
            </MenuItem>
            <MenuItem
              onClick={handleCloseNavMenu}
              style={{ background: "#23282C" }}
            >
              <Link to="/fabricdashboard">
                <Typography>Fábrica</Typography>
              </Link>
            </MenuItem>
          </Menu>
        </Box>

        <Box sx={{ flexGrow: 1, display: { xs: "none", md: "flex" } }}>
          <NavLink to="/supplies" activeClassName="active">
            <Typography textAlign="center" padding={2}>
              Insumos
            </Typography>
          </NavLink>
          <NavLink to="/components" activeClassName="active">
            <Typography textAlign="center" padding={2}>
              Componentes
            </Typography>
          </NavLink>
          <NavLink exact to="/" activeClassName="active">
            <Typography textAlign="center" padding={2}>
              Productos
            </Typography>
          </NavLink>
          <NavLink to="/fabricdashboard" activeClassName="active">
            <Typography textAlign="center" padding={2}>
              Fábrica
            </Typography>
          </NavLink>
          <NavLink to="/calculator" activeClassName="active">
            <Typography textAlign="center" padding={2}>
              Calculadora
            </Typography>
          </NavLink>
        </Box>
      </Toolbar>
    </AppBar>
  );
};
export default NavBar;