import {
  Box,
  darken,
  Drawer,
  List,
  ListItem,
  Theme,
  Toolbar,
  Typography
} from "@mui/material";
import { useState } from "react";
import PageContainer from "./PageContainer";
import Endpoints from "apiDocs/endpoints";
import Definitions from "apiDocs/definitions";
import Information from "apiDocs/information";
import Enumerators from "apiDocs/enumerators";
import { makeStyles } from "@mui/styles";

const drawerWidth = 240;

const useStyles = makeStyles((theme: Theme) => ({
    root: {
      display: "flex"
    },
    drawer: {
      width: drawerWidth,
      zIndex: "10 !important"
    },
    drawerPaper: {
      width: drawerWidth
    },
    drawerContainer: {
      overflow: "auto"
    },
    content: {
      flexGrow: 1,
      padding: theme.spacing(3)
    },
    selected: {
      background: darken(theme.palette.background.paper, 0.25),
      cursor: "pointer"
    },
    menuItem: {
      cursor: "pointer",
      "&:hover": {
        background: darken(theme.palette.background.paper, 0.10)
      }
    }
  })
);

export default function APIDocs() {
  const [currentView, setCurrentView] = useState("info");
  const classes = useStyles();

  return (
    <PageContainer>
      <Box className={classes.root}>
        <Box className={classes.content} marginBottom={5}>
          <Box>
            <Typography variant="h3" style={{ fontWeight: 650 }}>
              API Documentation
            </Typography>
          </Box>
          <Box>
            {currentView === "info" && <Information />}
            {currentView === "endpoints" && <Endpoints />}
            {currentView === "definitions" && <Definitions />}
            {currentView === "enums" && <Enumerators />}
          </Box>
        </Box>
        <Drawer
          anchor="right"
          variant="permanent"
          className={classes.drawer}
          classes={{ paper: classes.drawerPaper }}>
          <Toolbar />
          <Box className={classes.drawerContainer}>
            <List>
              <ListItem
                className={currentView === "info" ? classes.selected : classes.menuItem}
                //button
                onClick={() => {
                  setCurrentView("info");
                }}>
                <Typography>Information</Typography>
              </ListItem>
              <ListItem
                className={currentView === "endpoints" ? classes.selected : classes.menuItem}
                //button
                onClick={() => {
                  setCurrentView("endpoints");
                }}>
                <Typography>Endpoints</Typography>
              </ListItem>
              <ListItem
                className={currentView === "definitions" ? classes.selected : classes.menuItem}
                //button
                onClick={() => {
                  setCurrentView("definitions");
                }}>
                <Typography>Definitions</Typography>
              </ListItem>
              <ListItem
                className={currentView === "enums" ? classes.selected : classes.menuItem}
                //button
                onClick={() => {
                  setCurrentView("enums");
                }}>
                <Typography>Enumerators</Typography>
              </ListItem>
            </List>
          </Box>
        </Drawer>
      </Box>
    </PageContainer>
  );
}
