import {
  Accordion,
  AccordionDetails,
  AccordionSummary,
  AppBar,
  Box,
  Button,
  Checkbox,
  Collapse,
  DialogActions,
  DialogContent,
  DialogContentText,
  DialogTitle,
  FormControl,
  FormControlLabel,
  FormHelperText,
  FormLabel,
  Grid2 as Grid,
  IconButton,
  InputAdornment,
  MobileStepper,
  Radio,
  RadioGroup,
  Step,
  StepLabel,
  Stepper,
  Switch,
  Tab,
  Tabs,
  TextField,
  Theme,
  Toolbar,
  Tooltip,
  Typography,
  useTheme
} from "@mui/material";
import { Close, ExpandMore, Info, KeyboardArrowLeft, KeyboardArrowRight } from "@mui/icons-material";
// import { getBinModel } from "common/DataImports/BinCables/BinCableImporter";
//import { jsonBin } from "common/DataImports/BinCables/BinCableImporter";
import DeleteButton from "common/DeleteButton";
import OutlinedBox from "common/OutlinedBox";
import ResponsiveDialog from "common/ResponsiveDialog";
import SearchSelect, { Option } from "common/SearchSelect";
import {
  ConeVolume,
  CylinderVolume,
  RadiansToDegrees,
  TriangleOppositeLength
} from "common/TrigFunctions";
import FanPicker from "fans/fanPicker";
import { GrainOptions, ToGrainOption } from "grain";
import GrainDescriber from "grain/GrainDescriber";
import GrainTransaction from "grain/GrainTransaction";
import { GetGrainUseOptions, ToGrainUseOption } from "grain/GrainUse";
import { useMobile, useSnackbar } from "hooks";
import { clone, cloneDeep } from "lodash";
import { Bin } from "models";
import moment from "moment";
import { GetBinShapeDescribers } from "pbHelpers/Bin";
import { pond } from "protobuf-ts/pond";
import { useBinAPI, useBinYardAPI, useGlobalState, useLibraCartProxyAPI } from "providers";
import React, { useCallback, useEffect, useState } from "react";
// import { useHistory } from "react-router";
import { getDistanceUnit, or, getTemperatureUnit, getGrainUnit } from "utils";
import { makeStyles } from "@mui/styles";
import { useNavigate } from "react-router-dom";
import BinSelector from "./BinSelector";
import CustomGrainSelector from "grain/CustomGrainSelector";
// import BinSelector from "./BinSelector";

const useStyles = makeStyles((theme: Theme) => {
  return ({
    stepper: {
      padding: theme.spacing(0.5)
    },
    secondaryColor: {
      color: theme.palette.secondary.main
    },
    textSecondaryColor: {
      color: theme.palette.text.secondary
    },
    bottomSpacing: {
      marginBottom: theme.spacing(1)
    },
    tabs: {
      width: "100%",
      boxSizing: "border-box",
      flexShrink: 1
    },
    tabSmall: {
      width: "100%",
      boxSizing: "border-box",
      flexShrink: 1,
      minWidth: "48px"
    }
  })
});

type Mode = "add" | "update" | "remove";

interface Props {
  open: boolean;
  onClose: (refresh?: boolean) => void;
  mode?: Mode;
  bin?: Bin;
  canEdit: boolean;
  openedBinYard?: string;
  userID: string;
  coords?: { longitude: number; latitude: number };
  binYards?: pond.BinYardSettings[];
}

interface BinStep {
  label: string;
}

const getSteps = (): BinStep[] => {
  return [{ label: "General" }, { label: "Fan" }, { label: "Inventory" }, { label: "Thresholds" }];
};

interface BinFormExtension {
  capacity: string;
  height: string;
  topConeHeight: string;
  sidewallHeight: string;
  hopperHeight: string;
  diameter: string;
  grainBushels: string;
  grainTonnes: string;
  grainType: Option | null;
  grainUse: Option | null;
  grainSubtype: string;
  customTypeName: string;
  highTemp: number;
  lowTemp: number;
  bushelsPerTonne: string;
  tempTarget: number;
}

export default function BinSettings(props: Props) {
  const classes = useStyles();
  //the conversion constant to convert cubic feet to bushels
  const conversionConstantFT = 0.7786;
  const isMobile = useMobile();
  const theme = useTheme();
  // const history = useHistory();
  const navigate = useNavigate();
  const binAPI = useBinAPI();
  const binYardAPI = useBinYardAPI();
  const { openSnack } = useSnackbar();
  const { open, bin, onClose, mode, canEdit, openedBinYard, userID, coords } = props;
  const steps = getSteps();
  const [activeStep, setActiveStep] = useState(0);
  const [form, setForm] = useState<pond.BinSettings>(pond.BinSettings.create());
  const [formExtension, setFormExtension] = useState<BinFormExtension>({
    capacity: "",
    height: "",
    topConeHeight: "",
    sidewallHeight: "",
    hopperHeight: "",
    diameter: "",
    grainBushels: "",
    grainTonnes: "",
    grainType: null,
    grainUse: null,
    grainSubtype: "",
    customTypeName: "",
    highTemp: 20,
    lowTemp: 10,
    bushelsPerTonne: "",
    tempTarget: 15
  });
  const [initialized, setInitialized] = useState(false);
  const [removeIsOpen, setRemoveIsOpen] = useState(false);
  const [binYardOptions, setBinYardOptions] = useState<Option[] | null>(null);
  const [selectedBinYard, setSelectedBinYard] = useState<Option | null>(null);
  const grainOptions = GrainOptions();
  const grainUseOptions = GetGrainUseOptions();
  const [inputCapacity, setInputCapacity] = useState<string>("");
  const [{ user, as }] = useGlobalState();
  const [grainDiff, setGrainDiff] = useState(0);
  const [isCustomInventory, setIsCustomInventory] = useState<boolean>(false);
  const [grainUpdate, setGrainUpdate] = useState(false);
  const [inMoistureString, setInMoistureString] = useState("0");
  const [tMoistureString, setTMoistureString] = useState("0");
  const [moistureTargetDeviation, setMoistureTargetDeviation] = useState("0");
  const [autoFillThreshold, setAutoFillThreshold] = useState(5);
  const [lidarDropDistance, setLidarDropDistance] = useState(0);
  const [validInitial, setValidInitial] = useState(true);
  const [validTarget, setValidTarget] = useState(true);
  const [validDeviation, setValidDeviation] = useState(true);
  const [highTempC, setHighTempC] = useState(20);
  const [lowTempC, setLowTempC] = useState(10);
  const [isCustomBin, setIsCustomBin] = useState(false);
  const [binModelOps, setBinModelOptions] = useState<Option[]>([]);
  const [selectedBinModel, setSelectedBinModel] = useState<Option | null>(null);
  const [modelID, setModelID] = useState(0);
  const [autoTopNode, setAutoTopNode] = useState(false);
  const [inventoryControl, setInventoryControl] = useState<pond.BinInventoryControl>(
    pond.BinInventoryControl.BIN_INVENTORY_CONTROL_UNKNOWN
  );
  const [storageType, setStorageType] = useState<pond.BinStorage>(
    pond.BinStorage.BIN_STORAGE_SUPPORTED_GRAIN
  );
  //libracart stuff
  const libracartAPI = useLibraCartProxyAPI()
  const [lcDestination, setlcDestination] = useState<Option | null>()
  const [lcDestinationOptions, setlcDestinationOptions] = useState<Option[]>([])
  const [customGrain, setCustomGrain] = useState<pond.GrainSettings>()

  useEffect(() => {
    if (open) {
      if (bin && bin.settings.specs) {
        setIsCustomBin(true);
        setModelID(bin.settings.specs.modelId);
      }
      let initForm = pond.BinSettings.create(
        bin
          ? bin.settings
          : {
              ...{
                specs: pond.BinSpecs.create({ shape: pond.BinShape.BIN_SHAPE_FLAT_BOTTOM }),
                inventory: pond.BinInventory.create({ grainBushels: 0, targetTemperature: 15, autoThreshold: 5 }),
                highTemp: 20,
                lowTemp: 10
              }
            }
      );
      if (mode === "add") {
        initForm.yardKey = or(openedBinYard, "");
      }

      if (initForm.inventory) {
        setInventoryControl(initForm.inventory.inventoryControl);
        //make sure bushels per tonne is set so bins that don't have it in the settings yet can still do it before they get updated properly
        if (!initForm.inventory.bushelsPerTonne) {
          initForm.inventory.bushelsPerTonne = GrainDescriber(
            initForm.inventory.grainType
          ).bushelsPerTonne;
        }
        if (initForm.inventory.customGrain){
          setCustomGrain(initForm.inventory.customGrain)
        }
        //if the target temp is not set (older bins) make it the midpoint of the high and low temps assuming they are set otherwise make it 15
        if (!initForm.inventory.targetTemperature || initForm.inventory.targetTemperature) {
          if (initForm.highTemp && initForm.lowTemp) {
            initForm.inventory.targetTemperature = (initForm.lowTemp + initForm.highTemp) / 2;
          } else {
            initForm.inventory.targetTemperature = 15;
          }
        }
      }

      let h = "";
      let d = "";
      let topconeHeight = "";
      let sidewallHeight = "";
      let hopperHeight = "";
      if (initForm.specs) {
        if (getDistanceUnit() === pond.DistanceUnit.DISTANCE_UNIT_FEET) {
          h = (initForm.specs.heightCm * 0.0328).toFixed(2);
          d = (initForm.specs.diameterCm * 0.0328).toFixed(2);
          if (initForm.specs.advancedDimensions) {
            topconeHeight = (initForm.specs.advancedDimensions.topConeHeight * 0.0328).toFixed(2);
            sidewallHeight = (initForm.specs.advancedDimensions.sidewallHeight * 0.0328).toFixed(2);
            hopperHeight = (initForm.specs.advancedDimensions.hopperHeight * 0.0328).toFixed(2);
          }
        } else {
          h = (initForm.specs.heightCm / 100).toFixed(2);
          d = (initForm.specs.diameterCm / 100).toFixed(2);
          if (initForm.specs.advancedDimensions) {
            topconeHeight = (initForm.specs.advancedDimensions.topConeHeight / 100).toFixed(2);
            sidewallHeight = (initForm.specs.advancedDimensions.sidewallHeight / 100).toFixed(2);
            hopperHeight = (initForm.specs.advancedDimensions.hopperHeight / 100).toFixed(2);
          }
        }
      }
      let high = initForm.highTemp ?? 20;
      let low = initForm.lowTemp ?? 10;
      let target = initForm.inventory?.targetTemperature ?? 15;
      if (getTemperatureUnit() === pond.TemperatureUnit.TEMPERATURE_UNIT_FAHRENHEIT) {
        high = parseFloat((high * 1.8 + 32).toFixed(2));
        low = parseFloat((low * 1.8 + 32).toFixed(2));
        target = parseFloat((target * 1.8 + 32).toFixed(2));
      }

      let gb =
        initForm.storage === pond.BinStorage.BIN_STORAGE_FERTILIZER
          ? initForm.inventory?.grainBushels
            ? initForm.inventory.grainBushels * 35.239
            : 0
          : initForm.inventory?.grainBushels ?? 0;

      setForm(initForm);
      setHighTempC(initForm.highTemp ?? 20);
      setLowTempC(initForm.lowTemp ?? 10);
      setFormExtension({
        capacity: initForm.specs?.bushelCapacity.toString() ?? "",
        height: h,
        diameter: d,
        grainBushels: gb.toFixed(2),
        grainTonnes: initForm.inventory?.bushelsPerTonne
          ? (gb / initForm.inventory.bushelsPerTonne).toFixed(2)
          : "",
        grainType: initForm.inventory?.grainType
          ? ToGrainOption(initForm.inventory.grainType)
          : null,
        grainUse: initForm.inventory?.grainUse
          ? ToGrainUseOption(initForm.inventory.grainUse)
          : null,
        grainSubtype: initForm.inventory?.grainSubtype ?? "",
        customTypeName: initForm.inventory?.customTypeName ?? "",
        highTemp: high,
        lowTemp: low,
        tempTarget: target,
        hopperHeight: hopperHeight,
        topConeHeight: topconeHeight,
        sidewallHeight: sidewallHeight,
        bushelsPerTonne: initForm.inventory?.bushelsPerTonne.toString() ?? "0"
      });
      setInMoistureString(initForm.inventory?.initialMoisture.toString() ?? "0");
      setTMoistureString(initForm.inventory?.targetMoisture.toString() ?? "0");
      setMoistureTargetDeviation(initForm.inventory?.moistureTargetDeviation.toString() ?? "0");
      setAutoFillThreshold(initForm.inventory?.autoThreshold ?? 5)
      let dropDistance = initForm.inventory?.lidarDropCm ?? 0
      if(getDistanceUnit() === pond.DistanceUnit.DISTANCE_UNIT_FEET){
        dropDistance = Math.round((dropDistance/30.48)*100)/100
      }
      setLidarDropDistance(dropDistance)
      setActiveStep(0);
      if (bin) {
        setAutoTopNode(bin.settings.autoGrainNode);
        setIsCustomInventory(bin.storage() !== pond.BinStorage.BIN_STORAGE_SUPPORTED_GRAIN);
      }
      setStorageType(initForm.storage);
      setInitialized(true);
    } else {
      setInitialized(false);
    }
  }, [bin, open, mode, openedBinYard]);

  useEffect(() => {
    if (mode === "remove") {
      setRemoveIsOpen(true);
    }
  }, [mode]);

  const loadBinYards = useCallback(() => {
    if (props.binYards) {
      let yards: Option[] = props.binYards.map(yard => {
        let option = { value: yard.key, label: yard.name } as Option;
        if (yard.key === form.yardKey) {
          setSelectedBinYard(option);
        }
        return option;
      });
      let y: Option[] = [];
      y.push({ value: "", label: "No Yard" } as Option);
      y = yards.concat(y);
      setBinYardOptions(y);
    } else {
      binYardAPI
        .listBinYards(350, 0, "desc", as ? as : userID, undefined, undefined, as)
        .then(resp => {
          let data = resp.data.yard ? resp.data.yard : [];
          let yards: Option[] = data.map((yard: pond.BinYard) => {
            let option = { value: yard.settings?.key, label: yard.settings?.name } as Option;
            if (yard.settings?.key === form.yardKey) {
              setSelectedBinYard(option);
            }
            return option;
          });
          let y: Option[] = [];
          y.push({ value: "", label: "No Yard" } as Option);
          y = yards.concat(y);
          setBinYardOptions(y);
        })
        .catch(() => {});
    }
  }, [binYardAPI, form.yardKey, userID, as, props.binYards]);

  const loadLibraCartDestinations = useCallback(()=>{
    if(inventoryControl === pond.BinInventoryControl.BIN_INVENTORY_CONTROL_LIBRACART){
      //load the destinations for the user/team they are viewing as
      let options: Option[] = []
      libracartAPI.listDestinations(0,0,undefined, as)
      .then(resp=>{
        //set the options for the search select
        resp.data.destinations.forEach(d => {
          let newOp: Option = {
            label: d.name,
            value: d.id
          }
          options.push(newOp)
          //set the current option based on the key in the form
          if (d.id === form.libracartDestinationKey){
            setlcDestination(newOp)
          }
        })
        setlcDestinationOptions(options)
      }).catch(()=>{})
    }
  },[libracartAPI, inventoryControl, as, form.libracartDestinationKey])

  useEffect(() => {
    loadBinYards();
    loadLibraCartDestinations();
  }, [loadBinYards, loadLibraCartDestinations]);

  useEffect(() => {
    if (bin?.settings.specs?.bushelCapacity) {
      setInputCapacity(bin.settings.specs.bushelCapacity.toFixed(0));
    }
  }, [bin]);

  const close = (refresh?: boolean) => {
    onClose(refresh);
  };

  const addBin = () => {
    // If initial moisture is updated, so does the timestamp
    if (form.inventory?.initialMoisture !== bin?.settings.inventory?.initialMoisture) {
      if (form.inventory) form.inventory.initialTimestamp = moment().format();
    }
    if (form.inventory?.initialTimestamp === "") {
      form.inventory.initialTimestamp = moment().format();
    }
    if (form.specs) {
      form.specs.bushelCapacity = Number(inputCapacity);
      if (form.specs.useAdvanced && form.specs.advancedDimensions) {
        let adD = form.specs.advancedDimensions;
        form.specs.heightCm = adD.hopperHeight + adD.sidewallHeight + adD.topConeHeight;
      }
    }

    //if coordinates are passed in give the bin a location
    if (coords) {
      form.location = pond.Location.create({
        longitude: coords.longitude,
        latitude: coords.latitude
      });
    }
    form.mode = pond.BinMode.BIN_MODE_STORAGE; //make sure bins are in storage mode when creating new bins
    form.storage = storageType;
    form.highTemp = highTempC;
    form.lowTemp = lowTempC;
    form.autoGrainNode = autoTopNode;
    if (form.inventory) {
      form.inventory.inventoryControl = inventoryControl
      form.inventory.autoThreshold = autoFillThreshold
      form.inventory.lidarDropCm = getDistanceUnit() === pond.DistanceUnit.DISTANCE_UNIT_FEET ? lidarDropDistance * 30.48 : lidarDropDistance
      if(form.inventory.grainType !== pond.Grain.GRAIN_CUSTOM){
        form.inventory.customGrain = undefined
      }else{
        form.inventory.customGrain = customGrain
      }
    }

    binAPI
      .addBin(form, as)
      .then(resp => {
        openSnack("Successfully created bin");
        if (!coords) {
          let binPath: string = "/bins/" + resp.data.bin;
          navigate(binPath);
        }
        close(true);
      })
      .catch((err: any) => {
        openSnack("Failed to create bin");
        close();
      });
  };

  const updateBin = () => {
    // If initial moisture is updated, so does the timestamp
    if (form.inventory?.initialMoisture !== bin?.settings.inventory?.initialMoisture) {
      if (form.inventory) form.inventory.initialTimestamp = moment().format();
    }
    if (form.inventory?.initialTimestamp === "") {
      form.inventory.initialTimestamp = moment().format();
    }
    if (form.specs) {
      form.specs.bushelCapacity = Number(inputCapacity);
      if (form.specs.useAdvanced && form.specs.advancedDimensions) {
        let adD = form.specs.advancedDimensions;
        form.specs.heightCm = adD.hopperHeight + adD.sidewallHeight + adD.topConeHeight;
      }
    }
    if (form.inventory?.grainBushels !== bin?.settings.inventory?.grainBushels) {
      let current = bin?.settings.inventory?.grainBushels ?? 0;
      let newVal = form.inventory?.grainBushels ?? 0;
      setGrainDiff(newVal - current);
      setGrainUpdate(true);
    } else {
      if (bin && bin.key()) {
        form.storage = storageType;
        form.highTemp = highTempC;
        form.lowTemp = lowTempC;
        form.autoGrainNode = autoTopNode;
        if (form.inventory) {
          form.inventory.inventoryControl = inventoryControl
          form.inventory.autoThreshold = autoFillThreshold
          //if the users preferences are in feet convert the distance to cm otherwise it was entered as cm so use that
          form.inventory.lidarDropCm = getDistanceUnit() === pond.DistanceUnit.DISTANCE_UNIT_FEET ? lidarDropDistance * 30.48 : lidarDropDistance
          if(form.inventory.grainType !== pond.Grain.GRAIN_CUSTOM){
            form.inventory.customGrain = undefined
          }else{
            form.inventory.customGrain = customGrain
          }
        }
        binAPI
          .updateBin(bin.key(), form, as)
          .then(response => {
            openSnack("Updated " + bin.name());
            close(true);
          })
          .catch((err: any) => {
            openSnack("Failed to update " + bin.name());
            close();
          });
      }
    }
  };

  const grainInventoryController = () => {
    if (bin) {
      let newBin = clone(bin);
      newBin.settings = cloneDeep(form); //need to make sure to use all the changed settings
      if (newBin.settings.inventory) {
        newBin.settings.inventory.grainBushels = bin.settings.inventory?.grainBushels ?? 0; //but also need to use the old inventory amount so the diff is applied correctly
      }
      return (
        <GrainTransaction
          open={grainUpdate}
          mainObject={newBin}
          grainAdjustment={grainDiff}
          close={() => {
            setGrainUpdate(false);
            setGrainDiff(0);
          }}
          callback={() => {
            close(true);
          }}
        />
      );
    }
  };

  const removeBin = () => {
    if (bin && bin.key()) {
      binAPI
        .removeBin(bin.key(), as)
        .then(response => {
          openSnack(bin.name() + " was removed");
          navigate("/bins");
        })
        .catch(err => {
          openSnack("Failed to remove " + bin.name() + ".");
          setRemoveIsOpen(false);
          close();
        });
    }
  };

  const isFormValid = () => {
    let valid = false;
    if (
      validInitial &&
      validTarget &&
      validDeviation &&
      +formExtension.highTemp > +formExtension.lowTemp &&
      +formExtension.lowTemp <= +formExtension.tempTarget &&
      +formExtension.highTemp >= +formExtension.tempTarget
    ) {
      valid = true;
    }
    return valid;
  };

  const stepComplete = (step: number) => {
    switch (step) {
      case 1:
        let fan = form.fan;
        let fanValid =
          fan && fan.type !== pond.FanType.FAN_TYPE_UNKNOWN
            ? fan.size !== pond.FanHp.FAN_HP_UNKNOWN
            : true;
        return fanValid;
      case 0:
        let specs = form.specs;
        let specsValid =
          specs && Number(inputCapacity) > 0 && specs.diameterCm > 0 && specs.heightCm > 0;
        return specsValid
      default:
        return true;
    }
  };

  const stepNext = () => {
    setActiveStep(activeStep + 1);
  };

  const stepBack = () => {
    setActiveStep(activeStep - 1);
  };

  const updateForm = (
    key: keyof pond.BinSettings,
    value: pond.BinSettings[keyof pond.BinSettings]
  ) => {
    setForm(pond.BinSettings.create({ ...form, [key]: value }));
  };

  const updateFormExtension = (
    key: keyof BinFormExtension,
    value: BinFormExtension[keyof BinFormExtension]
  ) => {
    setFormExtension({ ...formExtension, [key]: value });
  };

  const titleText = () => {
    return mode === "add" ? "Create Bin" : "Update " + (bin ? bin.name() : "Bin");
  };

  const stepper = () => {
    if (mode === "add") {
      return (
        <Stepper
          activeStep={activeStep}
          alternativeLabel
          classes={{
            root: classes.stepper
          }}>
          {steps.map((s, i) => (
            <Step
              key={i}
              onClick={() => {
                const incompleteUpTo = (upTo: number): number => {
                  for (let j = 0; j < i; j++) {
                    if (!stepComplete(j)) {
                      return j;
                    }
                  }
                  return -1;
                };

                if (i <= activeStep || incompleteUpTo(i) === -1) {
                  setActiveStep(i);
                } else {
                  openSnack("Step " + (incompleteUpTo(i) + 1).toString() + " is incomplete");
                }
              }}>
              <StepLabel>{s.label}</StepLabel>
            </Step>
          ))}
        </Stepper>
      );
    }

    return (
      <Box display="flex" justifyContent="center" width="100%">
        <Tabs
          value={activeStep}
          onChange={(_, value) => setActiveStep(value)}
          indicatorColor="primary"
          textColor="primary"
          variant="fullWidth"
          aria-label="bin tabs"
          classes={{ root: classes.tabs }}>
          {steps.map((s, i) => (
            <Tab key={i} label={s.label} aria-label={s.label} />
          ))}
        </Tabs>
      </Box>
    );
  };

  const title = () => {
    if (isMobile) {
      return (
        <AppBar position="relative">
          <Toolbar>
            <IconButton edge="start" color="inherit" onClick={() => close()} aria-label="close">
              <Close />
            </IconButton>
            <Typography variant="h6" style={{ flex: 1 }}>
              {titleText()}
            </Typography>
            {mode === "add" ? (
              <Button
                onClick={() => addBin()}
                disabled={!isFormValid() || activeStep !== steps.length - 1}
                aria-label="create bin"
                color="inherit">
                Create
              </Button>
            ) : (
              <Button
                onClick={() => updateBin()}
                disabled={!canEdit || !isFormValid()}
                aria-label="update bin">
                Update
              </Button>
            )}
          </Toolbar>
          {stepper()}
        </AppBar>
      );
    }

    return (
      <React.Fragment>
        <DialogTitle>{titleText()}</DialogTitle>
        {mode === "update" && (
          <Tabs
            value={activeStep}
            onChange={(_, value) => setActiveStep(value)}
            indicatorColor="primary"
            textColor="primary"
            variant="fullWidth"
            aria-label="bin tabs"
            classes={{ root: classes.tabSmall }}>
            {steps.map((s, i) => (
              <Tab className={classes.tabSmall} key={i} label={s.label} aria-label={s.label} />
            ))}
          </Tabs>
        )}
      </React.Fragment>
    );
  };

  const binYardForm = () => {
    return (
      <Box style={{ marginTop: theme.spacing(1) }}>
        <Typography variant="subtitle2" align="center" color="primary" gutterBottom>
          Bin Yard
        </Typography>

        <Box marginY={1}>
          <SearchSelect
            selected={selectedBinYard}
            changeSelection={(option: Option | null) => {
              let newForm = form;
              newForm.yardKey = option?.value;
              setForm(newForm);
              setSelectedBinYard(option ? option : null);
            }}
            disabled={!canEdit}
            options={binYardOptions ? binYardOptions : []}
            label="Yard"
            loading={false}
          />
        </Box>
      </Box>
    );
  };

  const inventoryControlLabel = (control: pond.BinInventoryControl) => {
    switch(control){
      case pond.BinInventoryControl.BIN_INVENTORY_CONTROL_AUTOMATIC_LIDAR:
        return "Auto (lidar)"
      case pond.BinInventoryControl.BIN_INVENTORY_CONTROL_AUTOMATIC:
        return "Auto (cable)"
      case pond.BinInventoryControl.BIN_INVENTORY_CONTROL_HYBRID_LIDAR:
        return "Hybrid (lidar)"
      case pond.BinInventoryControl.BIN_INVENTORY_CONTROL_LIBRACART:
        return "Auto (Libra Cart)"
      default:
        return "Manual"
    }
  };

  const inventoryForm = () => {
    const inventory = form.inventory;
    const empty = inventory ? inventory.empty : false;
    const bushPerTonne = formExtension.bushelsPerTonne;
    const binQuantity = formExtension.grainBushels;
    const grainTonnes = formExtension.grainTonnes;
    const grainType = formExtension.grainType;
    const grainSubtype = formExtension.grainSubtype;
    const grainUse = formExtension.grainUse;
    const customTypeName = formExtension.customTypeName;
    return (
      <Box>
        <Typography variant="subtitle2" align="center" color="primary">
          Bin Inventory
        </Typography>

        <Grid container justifyContent="space-between" alignItems="center">
          <Grid>
            <Grid container alignItems="center">
              <Grid>Grain</Grid>
              <Grid>
                <Switch
                  color="default"
                  value={isCustomInventory}
                  checked={isCustomInventory}
                  onChange={(_, checked) => {
                    setIsCustomInventory(checked);
                    if (checked) {
                      setStorageType(pond.BinStorage.BIN_STORAGE_UNSUPPORTED_GRAIN);
                      updateForm(
                        "inventory",
                        pond.BinInventory.create({
                          ...form.inventory,
                          grainType: pond.Grain.GRAIN_CUSTOM,
                          bushelsPerTonne: 0
                        })
                      );
                      updateFormExtension("grainType", null);
                      updateFormExtension("bushelsPerTonne", "");
                    } else {
                      setStorageType(pond.BinStorage.BIN_STORAGE_SUPPORTED_GRAIN);
                      updateForm(
                        "inventory",
                        pond.BinInventory.create({
                          ...form.inventory,
                          customTypeName: undefined
                        })
                      );
                      updateFormExtension("customTypeName", "");
                    }
                  }}
                  name="storage"
                />
              </Grid>
              <Grid>Custom</Grid>
            </Grid>
          </Grid>
          <Grid>
            <FormControlLabel
              control={
                <Switch
                  checked={empty}
                  onChange={(_, checked) =>
                    updateForm(
                      "inventory",
                      pond.BinInventory.create({
                        ...form.inventory,
                        empty: checked
                      })
                    )
                  }
                  name="empty"
                />
              }
              disabled={!canEdit}
              label="Empty"
              labelPlacement="start"
            />
          </Grid>
        </Grid>
        {isCustomInventory && (
          <RadioGroup
            row
            value={storageType}
            onChange={(_, value) => {
              let storageType = parseFloat(value) as pond.BinStorage;
              setStorageType(storageType);
              if (storageType === pond.BinStorage.BIN_STORAGE_FERTILIZER) {
                formExtension.bushelsPerTonne = "";
                formExtension.grainBushels = (
                  parseFloat(formExtension.grainBushels) * 35.239
                ).toFixed(0);
              } else {
                formExtension.grainBushels = (
                  parseFloat(formExtension.grainBushels) / 35.239
                ).toFixed(0);
              }
            }}>
            <FormControlLabel
              value={pond.BinStorage.BIN_STORAGE_UNSUPPORTED_GRAIN}
              control={<Radio />}
              label={"Grain"}
            />
            <FormControlLabel
              value={pond.BinStorage.BIN_STORAGE_FERTILIZER}
              control={<Radio />}
              label={"Fertilizer"}
            />
          </RadioGroup>
        )}
        <Accordion className={classes.bottomSpacing}>
          <AccordionSummary expandIcon={<ExpandMore />}>
            <Grid
              width={"100%"}
              container
              direction="row"
              alignContent="center"
              alignItems="center"
              justifyContent="space-between">
              <Grid>
                <Typography>Inventory Control</Typography>
              </Grid>
              <Grid>
                <Typography>{inventoryControlLabel(inventoryControl)}</Typography>
              </Grid>
            </Grid>
          </AccordionSummary>
          <AccordionDetails>
            <RadioGroup
              row
              value={inventoryControl}
              onChange={(_, value) => {
                setInventoryControl(+value);
              }}>
              <FormControlLabel
                value={pond.BinInventoryControl.BIN_INVENTORY_CONTROL_MANUAL}
                control={<Radio />}
                label={"Manual"}
              />
              <FormControlLabel
                value={pond.BinInventoryControl.BIN_INVENTORY_CONTROL_AUTOMATIC}
                control={<Radio />}
                label={"Auto (Cable)"}
              />
              <FormControlLabel
                value={pond.BinInventoryControl.BIN_INVENTORY_CONTROL_AUTOMATIC_LIDAR}
                control={<Radio />}
                label={"Auto (Lidar)"}
              />
              <FormControlLabel
                value={pond.BinInventoryControl.BIN_INVENTORY_CONTROL_HYBRID_LIDAR}
                control={<Radio />}
                label={"Hybrid (Lidar)"}
              />
              {user.hasFeature("libra-cart") &&
                <FormControlLabel
                  value={pond.BinInventoryControl.BIN_INVENTORY_CONTROL_LIBRACART}
                  control={<Radio />}
                  label={"Auto (Libra Cart)"}
                />
              }
            </RadioGroup>
          </AccordionDetails>
          {inventoryControl === pond.BinInventoryControl.BIN_INVENTORY_CONTROL_AUTOMATIC &&
            !autoTopNode && (
              <Box marginX={2} marginBottom={2}>
                <Typography variant="caption">
                  Auto Top Node must be activated for automatic inventory control
                </Typography>
              </Box>
            )}
          {inventoryControl === pond.BinInventoryControl.BIN_INVENTORY_CONTROL_HYBRID_LIDAR && (
            <Box marginX={2} marginBottom={2}>
              <Typography variant="caption">
                Hybrid control will submit a transaction that must be approved by the user before inventory is changed
              </Typography>
            </Box>
          )}
          {(inventoryControl === pond.BinInventoryControl.BIN_INVENTORY_CONTROL_AUTOMATIC_LIDAR ||
           inventoryControl === pond.BinInventoryControl.BIN_INVENTORY_CONTROL_HYBRID_LIDAR) &&
            <Box width="100%" padding={2}>
              <TextField 
                fullWidth
                variant="outlined"
                label="Auto Threshold Percent"
                helperText="Fill percent threshold that must be crossed to affect inventory"
                InputProps={{
                  endAdornment: (
                    <InputAdornment position="end">
                      %
                    </InputAdornment>
                  )
                }}
                type="number"
                value={autoFillThreshold}
                onChange={e => {
                  setAutoFillThreshold(+e.target.value)
                }}
              />
              <TextField 
                sx={{marginTop: 4}}
                fullWidth
                variant="outlined"
                label="Drop Distance"
                helperText="The distance between the lidar and the peak"
                type="number"
                InputProps={{
                  endAdornment: (
                    <InputAdornment position="end">
                      {getDistanceUnit() === pond.DistanceUnit.DISTANCE_UNIT_FEET ? "ft" : "cm"}
                    </InputAdornment>
                  )
                }}
                value={lidarDropDistance}
                onChange={e => {
                  setLidarDropDistance(+e.target.value)
                }}
              />
            </Box>
          }
          {inventoryControl === pond.BinInventoryControl.BIN_INVENTORY_CONTROL_LIBRACART &&
            <Box width="100%" padding={2}>
              <SearchSelect 
                label="Libra Cart Destination"
                selected={lcDestination}
                changeSelection={option => {
                  let newForm = form;
                  newForm.libracartDestinationKey = option?.value;
                  setForm(newForm);
                  setlcDestination(option ? option : null);
                }}
                disabled={!canEdit}
                options={lcDestinationOptions}
              />
              <Typography variant="caption">
                The linked bins inventory will be adjusted When the Libra Cart Destination data is synced every 6 hours
              </Typography>
            </Box>
          }
        </Accordion>
        {empty ? (
          <Box marginTop={3} display="flex" flexDirection="column" alignItems="center">
            <Typography variant="subtitle1" color="textPrimary">
              Bin is currently empty
            </Typography>
            <Typography variant="body1" color="textSecondary">
              Inventory settings will be ignored
            </Typography>
            <Typography variant="body2" color="textSecondary">
              We may ask for your inventory again in the future
            </Typography>
          </Box>
        ) : (
          <Box>
            {/* <Typography variant="subtitle1" color="textSecondary" gutterBottom>
              {isCustom ? "Custom" : "Grain"}
            </Typography> */}
            <Box>
              {isCustomInventory ? 
                <React.Fragment>
                  {storageType === pond.BinStorage.BIN_STORAGE_FERTILIZER ? 
                    <React.Fragment>
                      <TextField
                        label="Type"
                        value={customTypeName}
                        type="text"
                        onChange={event => {
                          updateForm(
                            "inventory",
                            pond.BinInventory.create({
                              ...form.inventory,
                              customTypeName: event.target.value
                            })
                          );
                          updateFormExtension("customTypeName", event.target.value);
                        }}
                        fullWidth
                        variant="outlined"
                        className={classes.bottomSpacing}
                      />
                    </React.Fragment>
                  :
                    <Box sx={{border: "1px solid white", borderRadius: 2, padding: 2, marginBottom: 2}}>
                      <CustomGrainSelector initialGrain={customGrain} onGrainSettingsChange={(newGrainSettings) => {setCustomGrain(newGrainSettings)}}/>
                    </Box>
                  }
                </React.Fragment>
              : 
              <React.Fragment>
                <Box className={classes.bottomSpacing}>
                  <SearchSelect
                    label="Type"
                    selected={grainType}
                    changeSelection={option => {
                      let newGrainType = option
                        ? pond.Grain[option.value as keyof typeof pond.Grain]
                        : pond.Grain.GRAIN_INVALID;
                      updateForm(
                        "inventory",
                        pond.BinInventory.create({
                          ...form.inventory,
                          grainType: newGrainType,
                          bushelsPerTonne: GrainDescriber(newGrainType).bushelsPerTonne
                        })
                      );
                      //doesn't need to update the form extension to display the bushels per tonne as it is not changeable for the supported grain
                      //and is reset whenever the user switches between custom or not
                      updateFormExtension("grainType", option);
                    }}
                    group
                    disabled={!canEdit}
                    options={grainOptions}
                  />
                </Box>
                <TextField
                  label="Grain Variant"
                  value={grainSubtype}
                  type="text"
                  onChange={event => {
                    updateForm(
                      "inventory",
                      pond.BinInventory.create({
                        ...form.inventory,
                        grainSubtype: event.target.value
                      })
                    );
                    updateFormExtension("grainSubtype", event.target.value);
                  }}
                  fullWidth
                  variant="outlined"
                  disabled={!grainType}
                  className={classes.bottomSpacing}
                />
              </React.Fragment>
              }
              {getGrainUnit() === pond.GrainUnit.GRAIN_UNIT_BUSHELS ||
              storageType === pond.BinStorage.BIN_STORAGE_FERTILIZER ||
              formExtension.bushelsPerTonne === "0" ||
              formExtension.bushelsPerTonne === "" ? (
                <TextField
                  label="Amount"
                  value={binQuantity}
                  type="number"
                  onChange={event => {
                    let capacity =
                      bin?.settings.storage === pond.BinStorage.BIN_STORAGE_FERTILIZER
                        ? +inputCapacity * 35.239
                        : inputCapacity;
                    let value = event?.target.value;
                    let v =
                      value === ""
                        ? 0
                        : isNaN(parseFloat(value))
                        ? 0
                        : parseFloat(value) >= +capacity
                        ? +capacity
                        : parseFloat(value) <= 0
                        ? 0
                        : parseFloat(value);
                    if (bin?.storage() === pond.BinStorage.BIN_STORAGE_FERTILIZER && v) {
                      v = v / 35.239;
                    }
                    //setNewGrainQuantity(v);
                    updateForm(
                      "inventory",
                      pond.BinInventory.create({
                        ...form.inventory,
                        grainBushels: v
                      })
                    );
                    updateFormExtension("grainBushels", value);
                  }}
                  InputProps={{
                    endAdornment: (
                      <InputAdornment position="end">
                        {storageType === pond.BinStorage.BIN_STORAGE_FERTILIZER
                          ? "Litres"
                          : "Bushels"}
                      </InputAdornment>
                    )
                  }}
                  fullWidth
                  variant="outlined"
                  disabled={
                    !canEdit ||
                    inventoryControl === pond.BinInventoryControl.BIN_INVENTORY_CONTROL_AUTOMATIC
                  }
                  className={classes.bottomSpacing}
                />
              ) : (
                <TextField
                  label="Amount"
                  value={grainTonnes}
                  type="number"
                  onChange={event => {
                    let newWeight = event.target.value;
                    const bushelsPerTonne = +formExtension.bushelsPerTonne;

                    //get the bushel amount
                    if (!isNaN(+newWeight) && !isNaN(+bushelsPerTonne)) {
                      let newBushels = Math.round(+newWeight * +bushelsPerTonne * 100) / 100;
                      updateForm(
                        "inventory",
                        pond.BinInventory.create({
                          ...form.inventory,
                          grainBushels: newBushels
                        })
                      );
                      //updateFormExtension("grainBushels", newBushels.toString())
                      updateFormExtension("grainTonnes", newWeight);
                    }
                  }}
                  fullWidth
                  variant="outlined"
                  disabled={!canEdit}
                  InputProps={{
                    endAdornment: <InputAdornment position="end">mT</InputAdornment>
                  }}
                  className={classes.bottomSpacing}
                />
              )}
              {!isCustomInventory && (
                <SearchSelect
                  label="Use"
                  selected={grainUse}
                  changeSelection={option => {
                    let grainUse = option
                      ? pond.GrainUse[option.value as keyof typeof pond.GrainUse]
                      : pond.GrainUse.GRAIN_USE_UNKNOWN;
                    updateForm(
                      "inventory",
                      pond.BinInventory.create({
                        ...form.inventory,
                        grainUse: grainUse
                      })
                    );
                    updateFormExtension("grainUse", option);
                  }}
                  group
                  disabled={!canEdit}
                  options={grainUseOptions}
                />
              )}
            </Box>

            {/*<Box marginTop={1}>
              <DateTimePicker
                
                disabled={!canEdit}
                renderInput={props => <TextField {...props} helperText=""  />}
                value={time}
                onChange={date =>
                  updateForm(
                    "inventory",
                    pond.BinInventory.create({
                      ...form.inventory,
                      initialTimestamp: moment(date ?? undefined).format()
                    })
                  )
                }
                disableFuture
                label="Start Time"
              />
            </Box>*/}
          </Box>
        )}
      </Box>
    );
  };

  const fanPicker = () => {
    return (
      <FanPicker
        updateFan={(fanId: number) => {
          if (fanId !== undefined) {
            //set the fan id in the bin settings form
            form.fanId = fanId;
            //remove the old fan from the bin
            form.fan = null;
          }
        }}
        fanID={form.fanId}
        useCardView
      />
    );
  };

  const getBushels = (height: number, diameter: number): number => {
    let d = diameter * 3.281;
    let h = height * 3.281;
    return 0.628 * (d * d) * h;
  };

  /**
   * takes in the dimensions of the bin to calculate its bushel capacity
   * @param diameter
   * @param topConeHeight
   * @param sidewallHeight
   * @param hopperHeight
   * @returns the bushel capacity of the bin with given dimensions
   */
  const advancedGrainCalc = (
    diameter: number,
    topConeHeight: number,
    sidewallHeight: number,
    hopperHeight?: number
  ) => {
    //if the units are in meters will need to convert to feet
    let tcH = topConeHeight;
    let sH = sidewallHeight;
    let hH = hopperHeight ?? 0;
    let d = diameter;
    if (getDistanceUnit() === pond.DistanceUnit.DISTANCE_UNIT_METERS) {
      tcH = tcH * 3.281;
      sH = sH * 3.281;
      hH = hH * 3.281;
      d = d * 3.281;
    }
    let topConeBushels = ConeVolume(d / 2, tcH) * conversionConstantFT;
    let sidewallBushels = CylinderVolume(d / 2, sH) * conversionConstantFT;
    let hopperBushels = ConeVolume(d / 2, hH ?? 0) * conversionConstantFT;

    return Math.round(topConeBushels + sidewallBushels + hopperBushels);
  };

  const generalForm = () => {
    const name = form?.name ?? "";
    const shape = form.specs ? form.specs.shape.valueOf() : "";
    const advanced = form.specs ? form.specs.useAdvanced : false;
    const roofAngle =
      form.specs && form.specs.advancedDimensions ? form.specs.advancedDimensions.roofAngle : 0;
    const hopperAngle =
      form.specs && form.specs.advancedDimensions ? form.specs.advancedDimensions.hopperAngle : 0;

    let height = formExtension.height;
    let topConeHeight = formExtension.topConeHeight;
    let sidewallHeight = formExtension.sidewallHeight;
    let hopperHeight = formExtension.hopperHeight;
    let diameter = formExtension.diameter;

    // if (getDistanceUnit() === pond.DistanceUnit.DISTANCE_UNIT_FEET) {
    //   diameterM = (Number(diameterM) * 3.28084).toFixed(2);
    //   heightM = (Number(heightM) * 3.28084).toFixed(2);
    // }
    return (
      <Box>
        <Box width={"100%"}>
          <FormControlLabel
            control={
              <Switch
                value={isCustomBin}
                checked={isCustomBin}
                title="Build Custom Bin"
                onClick={() => {
                  setIsCustomBin(!isCustomBin);
                }}
              />
            }
            label="Build Custom Bin"
            labelPlacement="start"
          />
        </Box>
        <Grid container direction="row" alignItems="center" alignContent="center">
          <Grid >
            <FormControlLabel
              control={
                <Checkbox
                  value={autoTopNode}
                  checked={autoTopNode}
                  onChange={(_, checked) => {
                    setAutoTopNode(checked);
                  }}
                />
              }
              label={"Automatic Top Node"}
            />
          </Grid>
          <Grid >
            <Tooltip
              title={
                <React.Fragment>
                  <Typography>
                    Will run every day using the Day/Night cycle of temperatures on each of the bins
                    cables to determine which nodes are in the grain as opposed to in the air and
                    update its interactions accordingly.
                  </Typography>
                  <Typography>
                    If a bin is determined to be empty it will remove the interactions on its
                    cables.
                  </Typography>
                </React.Fragment>
              }>
              <Info />
            </Tooltip>
          </Grid>
        </Grid>

        <Typography variant="subtitle2" align="center" color="primary" gutterBottom>
          Bin Information
        </Typography>
        <Typography variant="body1" align="center" gutterBottom>
          {/* {modelID !== 0
            ? getBinModel(modelID)?.Manufacturer + " " + getBinModel(modelID)?.Model
            : "Custom"} */}
        </Typography>
        <Box marginTop={1} marginBottom={1}>
          <TextField
            label="Name"
            fullWidth
            variant="outlined"
            value={name}
            disabled={!canEdit}
            onChange={e => updateForm("name", e.target.value)}
          />
        </Box>
        {isCustomBin ? (
          <Box>
            <Box marginTop={1} alignContent="center" justifyContent="center">
              <TextField
                label="Height"
                type="number"
                required
                value={height}
                disabled={!canEdit || advanced}
                onChange={event => {
                  let value = event?.target.value;
                  let d = diameter;
                  let valueM = value;
                  let dM = diameter;
                  if (getDistanceUnit() === pond.DistanceUnit.DISTANCE_UNIT_FEET) {
                    valueM = (Number(value) * 0.3048).toFixed(2);
                    dM = (Number(d) * 0.3048).toFixed(2);
                  }
                  setModelID(0);
                  updateForm(
                    "specs",
                    pond.BinSpecs.create({
                      ...form.specs,
                      modelId: 0,
                      heightCm:
                        valueM === ""
                          ? undefined
                          : isNaN(parseFloat(valueM))
                          ? 0
                          : parseFloat(valueM) * 100
                    })
                  );
                  updateFormExtension("height", value);
                  setInputCapacity(getBushels(Number(valueM), Number(dM)).toFixed(0));
                  //updateFormExtension("capacity", getBushels(Number(value), Number(d)).toFixed(0));
                }}
                InputProps={{
                  endAdornment: (
                    <InputAdornment position="end">
                      {getDistanceUnit() !== pond.DistanceUnit.DISTANCE_UNIT_FEET ? "m" : "ft"}
                    </InputAdornment>
                  )
                }}
                style={{ width: "59%" }}
                variant="outlined"
              />
              <FormControlLabel
                style={{ width: "38%", paddingTop: 5 }}
                control={
                  <Switch
                    disabled={!canEdit}
                    value={advanced}
                    checked={advanced}
                    title="Advanced Dimensions"
                    onChange={(_, checked) => {
                      updateForm(
                        "specs",
                        pond.BinSpecs.create({
                          ...form.specs,
                          useAdvanced: checked
                        })
                      );
                      if (checked) {
                        let ext = cloneDeep(formExtension);
                        let s = isNaN(parseFloat(sidewallHeight)) ? 0 : parseFloat(sidewallHeight);
                        let t = isNaN(parseFloat(topConeHeight)) ? 0 : parseFloat(topConeHeight);
                        let h = isNaN(parseFloat(hopperHeight)) ? 0 : parseFloat(hopperHeight);
                        //change the total height to use the section values
                        ext.height = (s + t + h).toFixed(2);
                        //update the capacity with those dimensions
                        let diameter = isNaN(parseFloat(ext.diameter))
                          ? 0
                          : parseFloat(ext.diameter);
                        let bushelCap = advancedGrainCalc(diameter, t, s, h);

                        setInputCapacity(bushelCap.toFixed(0));
                        ext.capacity = bushelCap.toFixed(0);
                        setFormExtension(ext);
                      }
                    }}
                  />
                }
                label="Advanced"
                labelPlacement="start"
              />
            </Box>
            <Collapse in={advanced}>
              <Box marginTop={1}>
                <Grid container spacing={1}>
                  <Grid size={{ xs: 8 }}>
                    <TextField
                      label="Top Cone Height"
                      type="number"
                      value={topConeHeight}
                      disabled={!canEdit}
                      onChange={event => {
                        let value = event?.target.value;
                        let valueM = value;
                        setModelID(0);
                        if (getDistanceUnit() === pond.DistanceUnit.DISTANCE_UNIT_FEET) {
                          valueM = (Number(value) * 0.3048).toFixed(2);
                        }
                        let coneCM =
                          valueM === ""
                            ? undefined
                            : isNaN(parseFloat(valueM))
                            ? 0
                            : parseFloat(valueM) * 100;

                        //Calculate the roof angle
                        let dCm = form.specs?.diameterCm ?? 0; //get the diameter
                        let angle = RadiansToDegrees(Math.atan((coneCM ?? 0) / (dCm / 2))); //('arcTan(opposite / adjacent))' and convert to degrees
                        angle = Math.round(angle * 100) / 100; // round to 2 digits

                        let ext = cloneDeep(formExtension);
                        //calculate the total height from the parts
                        let s = isNaN(parseFloat(sidewallHeight)) ? 0 : parseFloat(sidewallHeight);
                        let t = isNaN(parseFloat(value)) ? 0 : parseFloat(value);
                        let h = isNaN(parseFloat(hopperHeight)) ? 0 : parseFloat(hopperHeight);

                        //trigger the advanced calculation for capacity
                        let diameter = isNaN(parseFloat(ext.diameter))
                          ? 0
                          : parseFloat(ext.diameter);
                        let bushelCap = advancedGrainCalc(diameter, t, s, h);

                        setInputCapacity(bushelCap.toFixed(0));
                        ext.capacity = bushelCap.toFixed(0);
                        ext.topConeHeight = value; //set the new top cone heigh
                        ext.height = (s + t + h).toFixed(2); // set the new total height

                        //update the extensions with the new values
                        setFormExtension({ ...ext });

                        //need to get the total height in cm
                        let totalHeightCM = s + t + h; //the total height in the users units
                        if(getDistanceUnit() === pond.DistanceUnit.DISTANCE_UNIT_FEET){
                          totalHeightCM = totalHeightCM * 30.48 //convert from feet to cm
                        }else{
                          totalHeightCM = totalHeightCM * 100 //convert from m to cm
                        }

                        //update the form with the new specs
                        updateForm(
                          "specs",
                          pond.BinSpecs.create({
                            ...form.specs,
                            modelId: 0,
                            heightCm: Math.round(totalHeightCM),
                            advancedDimensions: pond.BinAdvancedDimensions.create({
                              ...form.specs?.advancedDimensions,
                              topConeHeight: coneCM,
                              roofAngle: angle
                            })
                          })
                        );
                      }}
                      InputProps={{
                        endAdornment: (
                          <InputAdornment position="end">
                            {getDistanceUnit() !== pond.DistanceUnit.DISTANCE_UNIT_FEET
                              ? "m"
                              : "ft"}
                          </InputAdornment>
                        )
                      }}
                      variant="outlined"
                    />
                  </Grid>
                  <Grid size={{ xs: 4 }}>
                    <TextField
                      label="Roof Angle"
                      type="number"
                      value={roofAngle}
                      disabled={!canEdit}
                      onChange={event => {
                        let value = event.target.value;
                        let angle =
                          value === ""
                            ? undefined
                            : isNaN(parseFloat(value))
                            ? 0
                            : parseFloat(value);
                        let d = form.specs?.diameterCm ?? 0; //get the diameter
                        //calculate the new cone height for the roof angle
                        let coneCM = TriangleOppositeLength(d / 2, angle ?? 0);
                        let newConeHeight =
                          getDistanceUnit() === pond.DistanceUnit.DISTANCE_UNIT_FEET
                            ? (coneCM / 30.48).toFixed(2)
                            : (coneCM / 100).toFixed(2);

                        let ext = cloneDeep(formExtension);
                        let s = isNaN(parseFloat(sidewallHeight)) ? 0 : parseFloat(sidewallHeight);
                        let t = isNaN(parseFloat(newConeHeight)) ? 0 : parseFloat(newConeHeight);
                        let h = isNaN(parseFloat(hopperHeight)) ? 0 : parseFloat(hopperHeight);

                        //trigger the advanced calculation for capacity
                        let diameter = isNaN(parseFloat(ext.diameter))
                          ? 0
                          : parseFloat(ext.diameter);
                        let bushelCap = advancedGrainCalc(diameter, t, s, h);

                        setInputCapacity(bushelCap.toFixed(0));
                        ext.capacity = bushelCap.toFixed(0);
                        ext.topConeHeight = newConeHeight;
                        ext.height = (s + t + h).toFixed(2)
                        
                        setFormExtension(ext);
                        
                        //need to get the total height in cm
                        let totalHeightCM = s + t + h; //the total height in the users units
                        if(getDistanceUnit() === pond.DistanceUnit.DISTANCE_UNIT_FEET){
                          totalHeightCM = totalHeightCM * 30.48 //convert from feet to cm
                        }else{
                          totalHeightCM = totalHeightCM * 100 //convert from m to cm
                        }

                        setModelID(0);
                        //update the form with the new specs
                        updateForm(
                          "specs",
                          pond.BinSpecs.create({
                            ...form.specs,
                            modelId: 0,
                            heightCm: Math.round(totalHeightCM),
                            advancedDimensions: pond.BinAdvancedDimensions.create({
                              ...form.specs?.advancedDimensions,
                              roofAngle: angle ?? 0,
                              topConeHeight: coneCM
                            })
                          })
                        );
                      }}
                      InputProps={{
                        endAdornment: <InputAdornment position="end">°</InputAdornment>
                      }}
                      variant="outlined"
                    />
                  </Grid>
                  <Grid size={{ xs: 8 }}>
                    <TextField
                      label="Sidewall Height"
                      type="number"
                      value={sidewallHeight}
                      disabled={!canEdit}
                      onChange={event => {
                        let value = event?.target.value;
                        let valueM = value;
                        if (getDistanceUnit() === pond.DistanceUnit.DISTANCE_UNIT_FEET) {
                          valueM = (Number(value) * 0.3048).toFixed(2);
                        }
                        let ext = cloneDeep(formExtension);
                        let s = isNaN(parseFloat(value)) ? 0 : parseFloat(value);
                        let t = isNaN(parseFloat(topConeHeight)) ? 0 : parseFloat(topConeHeight);
                        let h = isNaN(parseFloat(hopperHeight)) ? 0 : parseFloat(hopperHeight);

                        //trigger the advanced calculation for capacity
                        let diameter = isNaN(parseFloat(ext.diameter))
                          ? 0
                          : parseFloat(ext.diameter);
                        let bushelCap = advancedGrainCalc(diameter, t, s, h);

                        setInputCapacity(bushelCap.toFixed(0));
                        ext.capacity = bushelCap.toFixed(0);
                        ext.sidewallHeight = value;
                        ext.height = (s + t + h).toFixed(2);

                        setFormExtension({ ...ext });

                        setModelID(0);

                        //need to get the total height in cm
                        let totalHeightCM = s + t + h; //the total height in the users units
                        if(getDistanceUnit() === pond.DistanceUnit.DISTANCE_UNIT_FEET){
                          totalHeightCM = totalHeightCM * 30.48 //convert from feet to cm
                        }else{
                          totalHeightCM = totalHeightCM * 100 //convert from m to cm
                        }

                        updateForm(
                          "specs",
                          pond.BinSpecs.create({
                            ...form.specs,
                            modelId: 0,
                            heightCm: Math.round(totalHeightCM),
                            advancedDimensions: pond.BinAdvancedDimensions.create({
                              ...form.specs?.advancedDimensions,
                              sidewallHeight:
                                valueM === ""
                                  ? undefined
                                  : isNaN(parseFloat(valueM))
                                  ? 0
                                  : parseFloat(valueM) * 100
                            })
                          })
                        );
                      }}
                      InputProps={{
                        endAdornment: (
                          <InputAdornment position="end">
                            {getDistanceUnit() !== pond.DistanceUnit.DISTANCE_UNIT_FEET
                              ? "m"
                              : "ft"}
                          </InputAdornment>
                        )
                      }}
                      variant="outlined"
                    />
                  </Grid>
                  {shape === pond.BinShape.BIN_SHAPE_HOPPER_BOTTOM && (
                    <React.Fragment>
                      <Grid size={{ xs: 4 }}>
                        <TextField
                          label="Hopper Angle"
                          type="number"
                          value={hopperAngle}
                          disabled={!canEdit}
                          onChange={event => {
                            let value = event.target.value;
                            let angle =
                              value === ""
                                ? undefined
                                : isNaN(parseFloat(value))
                                ? 0
                                : parseFloat(value);
                            let d = form.specs?.diameterCm ?? 0; //get the diameter
                            //calculate the new cone height for the roof angle
                            let coneCM = TriangleOppositeLength(d / 2, angle ?? 0);

                            let newHopperHeight =
                              getDistanceUnit() === pond.DistanceUnit.DISTANCE_UNIT_FEET
                                ? (coneCM / 30.48).toFixed(2)
                                : (coneCM / 100).toFixed(2);

                            let ext = cloneDeep(formExtension);
                            let s = isNaN(parseFloat(sidewallHeight))
                              ? 0
                              : parseFloat(sidewallHeight);
                            let t = isNaN(parseFloat(topConeHeight))
                              ? 0
                              : parseFloat(topConeHeight);
                            let h = isNaN(parseFloat(newHopperHeight))
                              ? 0
                              : parseFloat(newHopperHeight);

                            //trigger the advanced calculation for capacity
                            let diameter = isNaN(parseFloat(ext.diameter))
                              ? 0
                              : parseFloat(ext.diameter);
                            let bushelCap = advancedGrainCalc(diameter, t, s, h);

                            setInputCapacity(bushelCap.toFixed(0));
                            ext.capacity = bushelCap.toFixed(0);
                            ext.hopperHeight = newHopperHeight;
                            ext.height = (s + t + h).toFixed(2);

                            setFormExtension(ext);
                            //update the form with the new specs
                            setModelID(0);
                            updateForm(
                              "specs",
                              pond.BinSpecs.create({
                                ...form.specs,
                                modelId: 0,
                                advancedDimensions: pond.BinAdvancedDimensions.create({
                                  ...form.specs?.advancedDimensions,
                                  hopperAngle: angle ?? 0,
                                  hopperHeight: coneCM
                                })
                              })
                            );
                            //need to update the total height with the new height calculated from the angle
                          }}
                          InputProps={{
                            endAdornment: <InputAdornment position="end">°</InputAdornment>
                          }}
                          variant="outlined"
                        />
                      </Grid>
                      <Grid size={{ xs: 8 }}>
                        <TextField
                          label="Hopper Height"
                          type="number"
                          value={hopperHeight}
                          disabled={!canEdit}
                          onChange={event => {
                            let value = event?.target.value;
                            let valueM = value;
                            if (getDistanceUnit() === pond.DistanceUnit.DISTANCE_UNIT_FEET) {
                              valueM = (Number(value) * 0.3048).toFixed(2);
                            }

                            let hopperHeightCM =
                              valueM === ""
                                ? undefined
                                : isNaN(parseFloat(valueM))
                                ? 0
                                : parseFloat(valueM) * 100;

                            //Calculate the hopper angle
                            let d = form.specs?.diameterCm ?? 0; //get the diameter
                            let angle = RadiansToDegrees(
                              Math.atan((hopperHeightCM ?? 0) / (d / 2))
                            ); //('arcTan(opposite / adjacent))' and convert to degrees
                            angle = Math.round(angle * 100) / 100; // round to 2 digits

                            setModelID(0);
                            updateForm(
                              "specs",
                              pond.BinSpecs.create({
                                ...form.specs,
                                modelId: 0,
                                advancedDimensions: pond.BinAdvancedDimensions.create({
                                  ...form.specs?.advancedDimensions,
                                  hopperHeight: hopperHeightCM,
                                  hopperAngle: angle
                                })
                              })
                            );
                            let ext = cloneDeep(formExtension);
                            let s = isNaN(parseFloat(sidewallHeight))
                              ? 0
                              : parseFloat(sidewallHeight);
                            let t = isNaN(parseFloat(topConeHeight))
                              ? 0
                              : parseFloat(topConeHeight);
                            let h = isNaN(parseFloat(value)) ? 0 : parseFloat(value);

                            //trigger the advanced calculation for capacity
                            let diameter = isNaN(parseFloat(ext.diameter))
                              ? 0
                              : parseFloat(ext.diameter);
                            let bushelCap = advancedGrainCalc(diameter, t, s, h);

                            setInputCapacity(bushelCap.toFixed(0));
                            ext.capacity = bushelCap.toFixed(0);
                            ext.hopperHeight = value;
                            ext.height = (s + t + h).toFixed(2);

                            setFormExtension({ ...ext });
                          }}
                          InputProps={{
                            endAdornment: (
                              <InputAdornment position="end">
                                {getDistanceUnit() !== pond.DistanceUnit.DISTANCE_UNIT_FEET
                                  ? "m"
                                  : "ft"}
                              </InputAdornment>
                            )
                          }}
                          variant="outlined"
                        />
                      </Grid>
                    </React.Fragment>
                  )}
                </Grid>
              </Box>
            </Collapse>

            <Box marginTop={1}>
              <TextField
                label="Diameter"
                type="number"
                required
                value={diameter}
                disabled={!canEdit}
                onChange={event => {
                  let value = event?.target.value;
                  let h = height;
                  let valueM = value;
                  let hM = height;
                  if (getDistanceUnit() === pond.DistanceUnit.DISTANCE_UNIT_FEET) {
                    valueM = (Number(value) * 0.3048).toFixed(2);
                    hM = (Number(h) * 0.3048).toFixed(2);
                  }

                  let diameterCM =
                    valueM === ""
                      ? undefined
                      : isNaN(parseFloat(valueM))
                      ? 0
                      : parseFloat(valueM) * 100;

                  //adjust the angles using the new diameter
                  let d = diameterCM ?? 0; //get the diameter
                  //Calculate the hopper angle
                  let hopperAngle = RadiansToDegrees(
                    Math.atan((form.specs?.advancedDimensions?.hopperHeight ?? 0) / (d / 2))
                  ); //('arcTan(opposite / adjacent))' and convert to degrees
                  hopperAngle = Math.round(hopperAngle * 100) / 100; // round to 2 digits
                  //Calculate the roof angle
                  let roofAngle = RadiansToDegrees(
                    Math.atan((form.specs?.advancedDimensions?.topConeHeight ?? 0) / (d / 2))
                  ); //('arcTan(opposite / adjacent))' and convert to degrees
                  roofAngle = Math.round(roofAngle * 100) / 100; // round to 2 digits

                  setModelID(0);
                  updateForm(
                    "specs",
                    pond.BinSpecs.create({
                      ...form.specs,
                      modelId: 0,
                      diameterCm: diameterCM,
                      advancedDimensions: pond.BinAdvancedDimensions.create({
                        ...form.specs?.advancedDimensions,
                        hopperAngle: hopperAngle,
                        roofAngle: roofAngle
                      })
                    })
                  );

                  let ext = cloneDeep(formExtension);
                  ext.diameter = value;

                  if (advanced) {
                    //advanced capacity calc using the 3 sections
                  } else {
                    //basic capcity calc using only height and diameter
                    setInputCapacity(getBushels(Number(hM), Number(valueM)).toFixed(0));
                  }
                  setFormExtension({ ...ext });
                }}
                InputProps={{
                  endAdornment: (
                    <InputAdornment position="end">
                      {getDistanceUnit() !== pond.DistanceUnit.DISTANCE_UNIT_FEET ? "m" : "ft"}
                    </InputAdornment>
                  )
                }}
                fullWidth
                variant="outlined"
              />
            </Box>
            <Box marginTop={1}>
              <TextField
                label="Capacity"
                type="number"
                required
                value={inputCapacity}
                disabled={!canEdit}
                onChange={event => {
                  let value = event?.target.value;
                  value = isNaN(parseFloat(value)) ? "" : parseFloat(value) >= 0 ? value : "";
                  setInputCapacity(value);
                  updateForm(
                    "specs",
                    pond.BinSpecs.create({
                      ...form.specs,
                      bushelCapacity:
                        value === "" ? undefined : isNaN(parseFloat(value)) ? 0 : parseFloat(value)
                    })
                  );
                  updateFormExtension("capacity", value);
                }}
                InputProps={{
                  endAdornment: <InputAdornment position="end">bushels</InputAdornment>
                }}
                fullWidth
                variant="outlined"
              />
            </Box>

            <Box marginTop={2}>
              <FormControl component="fieldset" variant="outlined" fullWidth disabled={!canEdit}>
                {/* <OutlinedBox label={<FormLabel component="legend">Shape</FormLabel>} padding={1}> */}
                  <FormLabel component="legend">Shape</FormLabel>
                  <RadioGroup
                    aria-label="bin shape"
                    name="binShape"
                    value={shape}
                    onChange={(_, value) => {
                      //if user changed from hopper to flat bottom and they are using advanced dimensions
                      if (parseInt(value) === pond.BinShape.BIN_SHAPE_FLAT_BOTTOM && advanced) {
                        let ext = cloneDeep(formExtension);
                        //set the hopper measurements (height/angle) to be 0
                        ext.hopperHeight = "0";

                        //re-calc the total height for the extension, the settings will be done upon saving the bin
                        let s = isNaN(parseFloat(sidewallHeight)) ? 0 : parseFloat(sidewallHeight);
                        let t = isNaN(parseFloat(topConeHeight)) ? 0 : parseFloat(topConeHeight);
                        ext.height = (s + t).toFixed(2);

                        //re-calc the capacity
                        let diameter = isNaN(parseFloat(ext.diameter))
                          ? 0
                          : parseFloat(ext.diameter);
                        let bushelCap = advancedGrainCalc(diameter, t, s);
                        setInputCapacity(bushelCap.toFixed(0));
                        ext.capacity = bushelCap.toFixed(0);

                        //update extension with new values
                        setFormExtension(ext);
                      }

                      updateForm(
                        "specs",
                        pond.BinSpecs.create({
                          ...form.specs,
                          shape: parseInt(value),
                          advancedDimensions: pond.BinAdvancedDimensions.create({
                            ...form.specs?.advancedDimensions,
                            hopperAngle: 0,
                            hopperHeight: 0
                          })
                        })
                      );
                    }}>
                    {GetBinShapeDescribers()
                      .filter(s => s.key !== pond.BinShape.BIN_SHAPE_UNKNOWN)
                      .map(s => (
                        <FormControlLabel
                          key={s.key}
                          value={s.key}
                          control={<Radio />}
                          label={s.label}
                        />
                      ))}
                  </RadioGroup>
                {/* </OutlinedBox> */}
                <FormHelperText>Aeration effectiveness varies with bin shape</FormHelperText>
              </FormControl>
            </Box>
          </Box>
        ) : (
          <Box>
            <BinSelector
              vertical
              optionsChanged={options => {
                let ops: Option[] = [];
                options.forEach(o => {
                  ops.push({
                    label: o.Manufacturer + " - " + o.Model + " - " + o.Bottom,
                    value: o
                  });
                });
                setBinModelOptions(ops);
              }}
            />
            <Box marginTop={1}>
              <SearchSelect
                options={binModelOps}
                selected={selectedBinModel}
                label="Select Bin Model"
                changeSelection={selected => {
                  if (selected) {
                    setSelectedBinModel(selected);
                    let jsonBin = selected.value;
                    setModelID(jsonBin.ID);
                    let bushelCap = 0;
                    //need to set all the form (form is a bin settings object) data according to the bin that was selected
                    if (form.specs) {
                      //json bins lengths are in feet so for the data stored in the backend need to convert it to cm

                      let hopperHeightFt = TriangleOppositeLength(
                        jsonBin.Diameter / 2,
                        jsonBin.HopperAngle
                      );

                      // bushelCap = advancedGrainCalc(jsonBin.Diameter, jsonBin.Peak - jsonBin.Sidewall, jsonBin.Sidewall, hopperHeightFt)
                      // console.log(bushelCap)

                      let topConeBushels =
                        ConeVolume(jsonBin.Diameter / 2, jsonBin.Peak - jsonBin.Sidewall) *
                        conversionConstantFT;
                      let cylinderBushels =
                        CylinderVolume(jsonBin.Diameter / 2, jsonBin.Sidewall) *
                        conversionConstantFT;
                      let hopperBushels =
                        ConeVolume(jsonBin.Diameter / 2, hopperHeightFt) * conversionConstantFT;
                      bushelCap = topConeBushels + cylinderBushels + hopperBushels;

                      //set all the values that would be stored in the backend in bin settings
                      updateForm(
                        "specs",
                        pond.BinSpecs.create({
                          ...form.specs,
                          bushelCapacity: Math.round(bushelCap),
                          heightCm:
                            (jsonBin.Peak +
                              TriangleOppositeLength(jsonBin.Diameter / 2, jsonBin.HopperAngle)) *
                            30.48,
                          diameterCm: jsonBin.Diameter * 30.48,
                          advancedDimensions: pond.BinAdvancedDimensions.create({
                            sidewallHeight: jsonBin.Sidewall * 30.48,
                            topConeHeight: (jsonBin.Peak - jsonBin.Sidewall) * 30.48,
                            hopperHeight: hopperHeightFt * 30.48,
                            roofAngle: jsonBin.RoofAngle,
                            hopperAngle: jsonBin.HopperAngle
                          }),
                          modelId: jsonBin.ID,
                          shape:
                            jsonBin.Bottom === "Hopper Bottom"
                              ? pond.BinShape.BIN_SHAPE_HOPPER_BOTTOM
                              : pond.BinShape.BIN_SHAPE_FLAT_BOTTOM
                        })
                      );
                    }

                    //set the form extensions values that are displayed to the user
                    let hopperHeight = TriangleOppositeLength(
                      jsonBin.Diameter / 2,
                      jsonBin.HopperAngle
                    );

                    let ext = cloneDeep(formExtension);
                    ext.capacity = bushelCap.toFixed(0);
                    setInputCapacity(bushelCap.toFixed(0));

                    //the dimensions for the correct unit defined by user settings
                    let userHeight = jsonBin.Peak + hopperHeight;
                    let userTopCone = jsonBin.Peak - jsonBin.Sidewall;
                    let userSidewall = jsonBin.Sidewall;
                    let userHopperHeight = hopperHeight;
                    let userDiameter = jsonBin.Diameter;
                    //since the jsone data is in feet just check if we need to make it in meters
                    if (getDistanceUnit() === pond.DistanceUnit.DISTANCE_UNIT_METERS) {
                      userHeight = userHeight / 3.281;
                      userDiameter = userDiameter / 3.281;
                      userTopCone = userTopCone / 3.281;
                      userSidewall = userSidewall / 3.281;
                      userHopperHeight = userHopperHeight / 3.281;
                    }
                    ext.height = userHeight.toFixed(2);
                    ext.diameter = userDiameter.toFixed(2);
                    ext.topConeHeight = userTopCone.toFixed(2);
                    ext.sidewallHeight = userSidewall.toFixed(2);
                    ext.hopperHeight = userHopperHeight.toFixed(2);
                    setFormExtension({ ...ext });
                  }
                }}
              />
            </Box>
          </Box>
        )}
        {binYardForm()}
      </Box>
    );
  };

  const targetForm = () => {
    let highTemp = formExtension.highTemp;
    let lowTemp = formExtension.lowTemp;
    let tempTarget = formExtension.tempTarget;
    return (
      <Box>
        <Typography variant="subtitle2" align="center" color="primary" gutterBottom>
          Grain Targets
        </Typography>
        <Typography variant="body1" align="center" gutterBottom>
          Temperature
        </Typography>
        <Box marginTop={1}>
          <TextField
            label="Temperature Target"
            type="number"
            required
            error={
              +formExtension.lowTemp > +formExtension.tempTarget ||
              +formExtension.highTemp < +formExtension.tempTarget
            }
            helperText={
              +formExtension.lowTemp >= +formExtension.highTemp
                ? "Target must be between the lower and upper limits"
                : ""
            }
            value={tempTarget}
            disabled={!canEdit}
            onChange={event => {
              let value = event?.target.value;
              let valueC = value;
              if (getTemperatureUnit() === pond.TemperatureUnit.TEMPERATURE_UNIT_FAHRENHEIT) {
                valueC = ((Number(value) - 32) * (5 / 9)).toFixed(2);
              }

              if (form.inventory) {
                form.inventory.targetTemperature = +valueC;
              }
              updateFormExtension("tempTarget", value);
            }}
            InputProps={{
              endAdornment: (
                <InputAdornment position="end">
                  {getTemperatureUnit() === pond.TemperatureUnit.TEMPERATURE_UNIT_FAHRENHEIT
                    ? "F"
                    : "C"}
                </InputAdornment>
              )
            }}
            fullWidth
            variant="outlined"
          />
        </Box>
        <Box marginTop={1}>
          <Grid container spacing={1}>
            <Grid size={{ xs: 6 }}>
              <TextField
                label="Lower Limit"
                type="number"
                required
                error={+formExtension.lowTemp >= +formExtension.highTemp}
                helperText={
                  +formExtension.lowTemp >= +formExtension.highTemp
                    ? "Lower Limit must be less than the Upper Limit"
                    : ""
                }
                value={lowTemp}
                disabled={!canEdit}
                onChange={event => {
                  let value = event?.target.value;
                  let valueC = value;
                  if (getTemperatureUnit() === pond.TemperatureUnit.TEMPERATURE_UNIT_FAHRENHEIT) {
                    valueC = ((Number(value) - 32) * (5 / 9)).toFixed(2);
                  }
                  setLowTempC(+valueC);
                  updateFormExtension("lowTemp", value);
                }}
                InputProps={{
                  endAdornment: (
                    <InputAdornment position="end">
                      {getTemperatureUnit() === pond.TemperatureUnit.TEMPERATURE_UNIT_FAHRENHEIT
                        ? "F"
                        : "C"}
                    </InputAdornment>
                  )
                }}
                fullWidth
                variant="outlined"
              />
            </Grid>
            <Grid size={{ xs: 6 }}>
              <TextField
                label="Upper Limit"
                type="number"
                required
                error={+formExtension.highTemp <= +formExtension.lowTemp}
                helperText={
                  +formExtension.highTemp <= +formExtension.lowTemp
                    ? "Upper Limit must be greater than the Lower Limit"
                    : ""
                }
                value={highTemp}
                disabled={!canEdit}
                onChange={event => {
                  let value = event?.target.value;
                  let valueC = value;
                  if (getTemperatureUnit() === pond.TemperatureUnit.TEMPERATURE_UNIT_FAHRENHEIT) {
                    valueC = ((Number(value) - 32) * (5 / 9)).toFixed(2);
                  }
                  setHighTempC(+valueC);
                  updateFormExtension("highTemp", value);
                }}
                InputProps={{
                  endAdornment: (
                    <InputAdornment position="end">
                      {getTemperatureUnit() === pond.TemperatureUnit.TEMPERATURE_UNIT_FAHRENHEIT
                        ? "F"
                        : "C"}
                    </InputAdornment>
                  )
                }}
                fullWidth
                variant="outlined"
              />
            </Grid>
          </Grid>
        </Box>
          <Box marginTop={1}>
            <Typography variant="body1" align="center" gutterBottom>
              Moisture
            </Typography>
            {isCustomInventory && (
              <Typography variant="caption">You are using a custom Grain type, the drying estimate may not be accurate</Typography>
            )}
            <Box marginTop={1}>
              <TextField
                label="Target EMC"
                InputProps={{
                  endAdornment: <InputAdornment position="end">% EMC</InputAdornment>
                }}
                fullWidth
                value={tMoistureString}
                disabled={!canEdit}
                variant="outlined"
                className={classes.bottomSpacing}
                error={isNaN(+tMoistureString) && tMoistureString !== ""}
                onChange={event => {
                  setTMoistureString(event.target.value);
                  if (!isNaN(+event.target.value)) {
                    setValidTarget(true);
                    updateForm(
                      "inventory",
                      pond.BinInventory.create({
                        ...form.inventory,
                        targetMoisture: +event.target.value
                      })
                    );
                  } else {
                    setValidTarget(false);
                  }
                }}
              />
            </Box>

            <Grid container spacing={1}>
              <Grid size={{ xs: 6 }}>
                <TextField
                  label="Initial"
                  InputProps={{
                    endAdornment: <InputAdornment position="end">% EMC</InputAdornment>
                  }}
                  fullWidth
                  value={inMoistureString}
                  variant="outlined"
                  disabled={!canEdit}
                  className={classes.bottomSpacing}
                  error={isNaN(+inMoistureString) && inMoistureString !== ""}
                  onChange={event => {
                    setInMoistureString(event.target.value);
                    if (!isNaN(+event.target.value)) {
                      setValidInitial(true);
                      updateForm(
                        "inventory",
                        pond.BinInventory.create({
                          ...form.inventory,
                          initialMoisture: +event.target.value
                        })
                      );
                    } else {
                      setValidInitial(false);
                    }
                  }}
                />
              </Grid>
              <Grid size={{ xs: 6 }} >
                <TextField
                  label="Acceptable Deviation"
                  fullWidth
                  InputProps={{
                    endAdornment: <InputAdornment position="end">% EMC</InputAdornment>
                  }}
                  value={moistureTargetDeviation}
                  variant="outlined"
                  disabled={!canEdit}
                  className={classes.bottomSpacing}
                  error={isNaN(+moistureTargetDeviation) && moistureTargetDeviation !== ""}
                  onChange={event => {
                    setMoistureTargetDeviation(event.target.value);
                    if (!isNaN(+event.target.value)) {
                      setValidDeviation(true);
                      updateForm(
                        "inventory",
                        pond.BinInventory.create({
                          ...form.inventory,
                          moistureTargetDeviation: +event.target.value
                        })
                      );
                    } else {
                      setValidDeviation(false);
                    }
                  }}
                />
              </Grid>
            </Grid>
          </Box>

      </Box>
    );
  };

  const stepContent = (step: number) => {
    switch (step) {
      case 1:
        return fanPicker();
      case 2:
        return inventoryForm();
      case 3:
        return targetForm();
      default:
        return generalForm();
    }
  };

  const content = () => {
    return (
      <DialogContent style={{ padding: 0 }}>
        <Box paddingX={2} paddingY={1}>
          {!isMobile && mode === "add" && stepper()}
          {stepContent(activeStep)}
        </Box>
      </DialogContent>
    );
  };

  const nextButton = () => {
    if (activeStep < 3) {
      return (
        <Button
          size="small"
          aria-label="next"
          onClick={stepNext}
          disabled={activeStep === steps.length - 1 || !stepComplete(activeStep)}>
          Next
          {theme.direction === "rtl" ? <KeyboardArrowLeft /> : <KeyboardArrowRight />}
        </Button>
      );
    }
    return (
      <Button size="small" aria-label="next" onClick={addBin}>
        Create
        {theme.direction === "rtl" ? <KeyboardArrowLeft /> : <KeyboardArrowRight />}
      </Button>
    );
  };

  const actions = () => {
    if (mode === "add" && isMobile) {
      return (
        <MobileStepper
          variant="dots"
          steps={steps.length}
          position="static"
          activeStep={activeStep}
          nextButton={nextButton()}
          backButton={
            <Button size="small" aria-label="back" onClick={stepBack} disabled={activeStep === 0}>
              {theme.direction === "rtl" ? <KeyboardArrowRight /> : <KeyboardArrowLeft />}
              Back
            </Button>
          }
        />
      );
    }
    return (
      <DialogActions>
        <Grid container justifyContent="space-between" direction="row" width="100%">
          <Grid size={{ xs: 5 }}>
            {mode === "add" ? (
              <Button
                disabled={activeStep === 0}
                onClick={stepBack}
                color="primary"
                aria-label="Back">
                Back
              </Button>
            ) : (
              canEdit && <DeleteButton onClick={() => setRemoveIsOpen(true)}>Delete</DeleteButton>
            )}
          </Grid>
          <Grid size={{ xs: 7 }} container justifyContent="flex-end">
            {mode === "add" ? (
              <React.Fragment>
                {!isMobile && (
                  <Button onClick={() => close()} color="primary" aria-label="Cancel">
                    Cancel
                  </Button>
                )}

                {activeStep === steps.length - 1 ? (
                  <Button
                    color="primary"
                    onClick={addBin}
                    disabled={!isFormValid()}
                    aria-label="Submit">
                    Submit
                  </Button>
                ) : (
                  <Button
                    color="primary"
                    onClick={stepNext}
                    disabled={activeStep === steps.length - 1 || !stepComplete(activeStep)}
                    aria-label="Next">
                    Next
                  </Button>
                )}
              </React.Fragment>
            ) : (
              !isMobile && (
                <React.Fragment>
                  <Button onClick={() => close()} color="primary" aria-label="Cancel">
                    Cancel
                  </Button>
                  <Button
                    onClick={updateBin}
                    color="primary"
                    disabled={!canEdit || !isFormValid()}
                    aria-label="Submit">
                    Submit
                  </Button>
                </React.Fragment>
              )
            )}
          </Grid>
        </Grid>
      </DialogActions>
    );
  };

  const removeConfirmation = () => {
    return (
      <ResponsiveDialog
        fullScreen={false}
        open={removeIsOpen}
        onClose={() => setRemoveIsOpen(false)}>
        <DialogTitle>Delete {bin?.name() ?? "Bin"}?</DialogTitle>
        <DialogContent>
          <DialogContentText>
            Anyone that has access to {bin?.name() ?? "this bin"} will no longer be able to see it.
          </DialogContentText>
        </DialogContent>
        <DialogActions>
          <Button onClick={() => setRemoveIsOpen(false)} color="primary">
            Cancel
          </Button>
          <Button onClick={removeBin} color="primary">
            Delete
          </Button>
        </DialogActions>
      </ResponsiveDialog>
    );
  };

  if ((!open || !initialized) && !removeIsOpen) {
    return null;
  }

  return (
    <ResponsiveDialog
      maxWidth={"xs"}
      fullWidth
      fullScreen={isMobile}
      open={open}
      scroll="paper"
      onClose={() => {
        onClose();
        setSelectedBinYard(null);
      }}>
      {title()}
      {content()}
      {actions()}
      {removeConfirmation()}
      {grainInventoryController()}
    </ResponsiveDialog>
  );
}
