import {
  //Box,
  Grid2 as Grid,
  IconButton,
  lighten,
  List,
  ListItem,
  ListItemIcon,
  Theme,
  Typography
} from "@mui/material";
import { Device } from "models";
import FieldNamesIcon from "products/AgIcons/FieldNames";
import DeviceGroupIcon from "products/Construction/DeviceGroupIcon";
import JobSiteIcon from "products/Construction/JobSiteIcon";
import NexusSTIcon from "products/Construction/NexusSTIcon";
import VisibilityOffIcon from "@mui/icons-material/VisibilityOff";

//import { useDeviceAPI, useGlobalState } from "providers";
// import { downloadJSON } from "utils";
import { useState } from "react";
import { pond } from "protobuf-ts/pond";
import { makeStyles } from "@mui/styles";

const useStyles = makeStyles((theme: Theme) => ({
    button: {
      background: theme.palette.background.default,
      margin: 5,
      boxShadow: "4px 4px 10px black",
      width: 50,
      height: 50
    },
    list: {
      background: theme.palette.background.default,
      opacity: 0.75,
      borderRadius: 15,
      marginTop: 10,
      boxShadow: "4px 4px 10px black"
    },
    listItems: {
      borderRadius: "3rem",
      cursor: "pointer",
      "&:hover": {
        backgroundColor: lighten(theme.palette.background.default, 0.25)
      }
    },
    liFont: {
      fontWeight: 700,
      marginLeft: -15
    }
}));

interface Props {
  toggleMarkerType: (type: pond.ObjectType) => void;
  devices?: Device[];
  toggleMarkerDisplay: (display: boolean) => void;
}

export default function ConstructionMapTools(props: Props) {
  const { toggleMarkerType, toggleMarkerDisplay } = props;
  //const [{ user }] = useGlobalState();
  const classes = useStyles();
  const [siteControls, setSiteControls] = useState<"block" | "none">("none");
  const [deviceControls, setDeviceControls] = useState<"block" | "none">("none");
  const [placeDevice, setPlaceDevice] = useState<boolean>(false);
  const [placeGroup, setPlaceGroup] = useState<boolean>(false);
  const [placeSite, setPlaceSite] = useState<boolean>(false);
  const [siteButtonHovered, setSiteButtonHovered] = useState<boolean>(false);
  const [devButtonHovered, setDevButtonHovered] = useState<boolean>(false);
  const [markerDisplay, setMarkerDisplay] = useState(false);
  //const deviceAPI = useDeviceAPI();

  const toggleSiteControls = () => {
    if (siteControls === "none") {
      setSiteControls("block");
      setDeviceControls("none");
      setPlaceDevice(false);
      setPlaceGroup(false);
    } else {
      setSiteControls("none");
      setPlaceSite(false);
      toggleMarkerType(pond.ObjectType.OBJECT_TYPE_UNKNOWN);
    }
  };

  const toggleDeviceControls = () => {
    if (deviceControls === "none") {
      setDeviceControls("block");
      setSiteControls("none");
      setPlaceSite(false);
    } else {
      setDeviceControls("none");
      setPlaceDevice(false);
      setPlaceGroup(false);
      toggleMarkerType(pond.ObjectType.OBJECT_TYPE_UNKNOWN);
    }
  };

  //   const getDeviceGeoJson = () => {
  //     let ids: number[] = [];
  //     if (props.devices) {
  //       props.devices.forEach(dev => ids.push(dev.id()));
  //       deviceAPI.getMultiGeoJson(ids).then(resp => {
  //         downloadJSON(resp.data, "allDevicesGeoJSON.json");
  //       });
  //     }
  //   };

  return (
    <Grid container direction="column">
      <Grid>
        <Grid container direction="row">
          {" "}
          {/* row that has the buttons for controlling the display of the controls */}
          <Grid>
            <IconButton
              className={classes.button}
              title={"Sites"}
              onClick={toggleSiteControls}
              onMouseOver={() => setSiteButtonHovered(true)}
              onMouseOut={() => setSiteButtonHovered(false)}
              style={
                siteControls === "block"
                  ? { background: "blue" }
                  : siteButtonHovered
                  ? { background: "grey" }
                  : {}
              }>
              {siteControls === "block" ? <JobSiteIcon type="light" /> : <JobSiteIcon />}
            </IconButton>
          </Grid>
          <Grid>
            <IconButton
              className={classes.button}
              title={"Devices"}
              onClick={toggleDeviceControls}
              onMouseOver={() => setDevButtonHovered(true)}
              onMouseOut={() => setDevButtonHovered(false)}
              style={
                deviceControls === "block"
                  ? { background: "blue" }
                  : devButtonHovered
                  ? { background: "grey" }
                  : {}
              }>
              {deviceControls === "block" ? <NexusSTIcon type="light" /> : <NexusSTIcon />}
            </IconButton>
          </Grid>
        </Grid>
      </Grid>
      <Grid>
        <Grid container direction="row">
          {" "}
          {/* row that contains the controls */}
          <Grid style={{ display: siteControls }}>
            <List className={classes.list}>
              <ListItem
                id="addSite"
                onClick={() => {
                  toggleMarkerType(pond.ObjectType.OBJECT_TYPE_SITE);
                  setPlaceSite(true);
                }}
                className={classes.listItems}
                style={placeSite ? { background: "blue" } : {}}>
                <ListItemIcon>
                  <JobSiteIcon />
                </ListItemIcon>
                <Typography className={classes.liFont}>Add Site</Typography>
              </ListItem>
              <ListItem
                id="showSiteNames"
                onClick={() => {
                  setMarkerDisplay(!markerDisplay);
                  toggleMarkerDisplay(!markerDisplay);
                }}
                className={classes.listItems}>
                <ListItemIcon>
                  {markerDisplay ? <VisibilityOffIcon /> : <FieldNamesIcon />}
                </ListItemIcon>
                <Typography className={classes.liFont}>Show Marker Names</Typography>
              </ListItem>
            </List>
          </Grid>
          <Grid style={{ display: deviceControls }}>
            <List className={classes.list} style={{ marginLeft: 60 }}>
              <ListItem
                id="addDevice"
                onClick={() => {
                  setPlaceDevice(true);
                  toggleMarkerType(pond.ObjectType.OBJECT_TYPE_DEVICE);
                  setPlaceGroup(false);
                }}
                className={classes.listItems}
                style={placeDevice ? { background: "blue" } : {}}>
                <ListItemIcon>
                  <NexusSTIcon />
                </ListItemIcon>
                <Typography className={classes.liFont}>Add Device</Typography>
              </ListItem>
              <ListItem
                id="addGroup"
                onClick={() => {
                  setPlaceGroup(true);
                  toggleMarkerType(pond.ObjectType.OBJECT_TYPE_GROUP);
                  setPlaceDevice(false);
                }}
                className={classes.listItems}
                style={placeGroup ? { background: "blue" } : {}}>
                <ListItemIcon>
                  <DeviceGroupIcon />
                </ListItemIcon>
                <Typography className={classes.liFont}>Add Group</Typography>
              </ListItem>
              <ListItem
                id="showGroupNames"
                onClick={() => {
                  setMarkerDisplay(!markerDisplay);
                  toggleMarkerDisplay(!markerDisplay);
                }}
                className={classes.listItems}>
                <ListItemIcon>
                  {markerDisplay ? <VisibilityOffIcon /> : <FieldNamesIcon />}
                </ListItemIcon>
                <Typography className={classes.liFont}>Show Marker Names</Typography>
              </ListItem>
              {/* TODO: Create flag for the GeoJson data for device from map */}
              {/* {user.hasAdmin() && (
                <ListItem
                  id="exportGeoJSON"
                  button
                  onClick={() => getDeviceGeoJson()}
                  className={classes.listItems}>
                  <ListItemIcon></ListItemIcon>
                  <Typography className={classes.liFont}>Export GeoJSON for devices</Typography>
                </ListItem>
              )} */}
            </List>
          </Grid>
        </Grid>
      </Grid>
    </Grid>
  );
}
