import { useContext, useState } from "react";
import ViewContext from "./ctx/ViewContext.jsx";

import * as React from "react";
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 Container from "@mui/material/Container";
import Avatar from "@mui/material/Avatar";
import Button from "@mui/material/Button";
import Tooltip from "@mui/material/Tooltip";
import MenuItem from "@mui/material/MenuItem";
import Drawer from "@mui/material/Drawer";
import ListItem from "@mui/material/ListItem";
import ListItemIcon from "@mui/material/ListItemIcon";
import ListItemText from "@mui/material/ListItemText";
import List from "@mui/material/List";
import ListItemButton from "@mui/material/ListItemButton";
import NotificationsIcon from "@mui/icons-material/Notifications";
import WorkIcon from "@mui/icons-material/Work";
import FormatListBulletedIcon from "@mui/icons-material/FormatListBulleted";
import SettingsIcon from "@mui/icons-material/Settings";
import ErrorIcon from "@mui/icons-material/Error";

const pages = ["failing", "alerting", "jobs", "tests", "settings"];
const icons = [
  ErrorIcon,
  NotificationsIcon,
  WorkIcon,
  FormatListBulletedIcon,
  SettingsIcon,
];

export default function Views() {
  const [view, setView] = useState(pages[0]);
  const [drawerOpen, setDrawer] = React.useState(false);

  const toggleDrawer = () => setDrawer(!drawerOpen);
  const closeDrawer = () => setDrawer(false);
  const openPage = (e) => setView(e.target.outerText.toLowerCase());

  return (
    <AppBar position="static" color="secondary">
      <Container maxWidth="xl">
        <Toolbar disableGutters>
          <Drawer open={drawerOpen} onClose={closeDrawer}>
            {" "}
            <Box sx={{ width: 250 }} role="presentation">
              <List>
                {pages.map((text, index) => (
                  <ListItemButton
                    key={text}
                    onClick={openPage}
                    selected={view === text}
                  >
                    <ListItemIcon>{/*icons[index]*/}</ListItemIcon>
                    <ListItemText
                      primary={text.charAt(0).toUpperCase() + text.slice(1)}
                    />
                  </ListItemButton>
                ))}
              </List>
            </Box>
          </Drawer>
          <IconButton
            size="large"
            edge="start"
            color="inherit"
            aria-label="menu"
            sx={{ mr: 2 }}
            onClick={toggleDrawer}
          >
            <MenuIcon />
          </IconButton>
          <Typography
            variant="h6"
            noWrap
            component="div"
            sx={{ mr: 2, display: { xs: "none", md: "flex" } }}
          >
            {view.charAt(0).toUpperCase() + view.slice(1)}
          </Typography>
          <Typography
            variant="h6"
            noWrap
            component="div"
            sx={{ flexGrow: 1, display: { xs: "flex", md: "none" } }}
          >
            {view.charAt(0).toUpperCase() + view.slice(1)}
          </Typography>
          <Box sx={{ flexGrow: 0 }}>
            <Avatar alt="Remy Sharp" src="/assets/QA.jpg" />
          </Box>
        </Toolbar>
      </Container>
    </AppBar>
  );
}
