import {
  AppBar,
  Box,
  Button,
  Drawer,
  Grid2 as Grid,
  IconButton,
  Theme,
  Typography
} from "@mui/material";
import { ArrowBackIos, ArrowForwardIos, Close, Fullscreen } from "@mui/icons-material";
import { useMobile } from "hooks";
import DeleteIcon from "products/AgIcons/Delete";
import GearMarkerIcon from "products/AgIcons/GearMarker";
import { useState } from "react";
import { makeStyles } from "@mui/styles";

interface Props {
  open: boolean;
  onClose: (refresh?: boolean) => void;
  displayPrev: () => void;
  displayNext: () => void;
  title: string;
  subheader?: JSX.Element;
  drawerBody: JSX.Element;
  removeElement?: () => void;
  updateElement?: () => void;
  objectActions?: JSX.Element;
  width: string | number;
}

const useStyles = makeStyles((theme: Theme) => ({
    drawerMobile: {
      borderRadius: 30
    },
    drawerDesktop: {
      position: "relative",
      top: 64
    },
    header: {
      position: "static",
      background: theme.palette.background.default,
      paddingLeft: 15,
      paddingRight: 15,
      paddingBottom: 15,
      zIndex: 101
    },
    titleDisplay: {
      position: "static",
      borderRadius: 30,
      backgroundColor: theme.palette.secondary.main
    },
    drawerPaper: {
      overflowX: "hidden"
    }
}));

export default function DisplayDrawer(props: Props) {
  const {
    open,
    onClose,
    displayPrev,
    displayNext,
    title,
    drawerBody,
    removeElement,
    updateElement,
    objectActions,
    width
  } = props;
  const isMobile = useMobile();
  const classes = useStyles();
  const [fullScreen, setFullScreen] = useState(false);
  const [drawerHeight, setDrawerHeight] = useState(60);

  const toggleFullScreen = () => {
    if (!fullScreen) {
      setDrawerHeight(94);
      setFullScreen(true);
    } else {
      setDrawerHeight(60);
      setFullScreen(false);
    }
  };

  return (
    <Drawer
      open={open}
      anchor={isMobile ? "bottom" : "right"}
      BackdropProps={{ invisible: true }}
      variant={isMobile ? "temporary" : "persistent"}
      classes={{ paper: classes.drawerPaper }}>
      <Box
        className={isMobile ? classes.drawerMobile : classes.drawerDesktop}
        style={{ width: isMobile ? "100%" : width }}>
        <Box className={classes.header} style={{ width: isMobile ? "100%" : width }}>
          <Box display="flex" justifyContent="space-between" alignItems="center">
            <Box>
              <IconButton onClick={() => onClose()}>
                <Close />
              </IconButton>
            </Box>
            <Box>
              {updateElement && (
                <IconButton onClick={updateElement}>
                  <GearMarkerIcon />
                </IconButton>
              )}
              {removeElement && (
                <IconButton onClick={removeElement}>
                  <DeleteIcon />
                </IconButton>
              )}
              {objectActions && objectActions}
              {isMobile && (
                <IconButton onClick={() => toggleFullScreen()}>
                  <Fullscreen />
                </IconButton>
              )}
            </Box>
          </Box>
          <Box className={classes.titleDisplay}>
            <Grid
              container
              direction="row"
              justifyContent="space-between"
              alignItems="center"
              wrap="nowrap">
              <Grid>
                <Button onClick={() => displayPrev()}>
                  <ArrowBackIos style={{ color: "black" }} />
                </Button>
              </Grid>
              <Grid>
                <Box>
                  <Typography sx={{ color: "black", fontWeight: 650}} align="center" variant="h5">
                    {title}
                  </Typography>
                </Box>
              </Grid>
              <Grid>
                <Button onClick={() => displayNext()}>
                  <ArrowForwardIos style={{ color: "black" }} />
                </Button>
              </Grid>
            </Grid>
          </Box>
        </Box>
        <Box>{drawerBody}</Box>
      </Box>
    </Drawer>
  );
}
