frontend/src/bin/binSummary/components/binSensors.tsx

import { Box, Grid2, Typography } from "@mui/material";
import { Bin, Component } from "models";
import { Ambient } from "models/Ambient";
import { CO2 } from "models/CO2";
import { Controller } from "models/Controller";
import { GrainCable } from "models/GrainCable";
import { Headspace } from "models/Headspace";
import { Plenum } from "models/Plenum";
import { Pressure } from "models/Pressure";
import { pond } from "protobuf-ts/pond";
import { quack } from "protobuf-ts/quack";
import React, { useEffect, useState } from "react";

interface Props {
    bin: Bin
    components: Map<string, Component>;
    preferences?: Map<string, pond.BinComponentPreferences>;
    setPreferences: React.Dispatch<
      React.SetStateAction<Map<string, pond.BinComponentPreferences> | undefined>
    >;
}

export default function BinSensors(props: Props){
    const {bin, components, preferences, setPreferences} = props
    const [cables, setCables] = useState<GrainCable[]>([])
    const [plenums, setPlenums] = useState<Plenum[]>([])
    const [ambient, setAmbient] = useState<Ambient[]>([])
    const [pressures, setPressures] = useState<Pressure[]>([])
    const [fans, setFans] = useState<Controller[]>([])
    const [heaters, setHeaters] = useState<Controller[]>([])
    //the above component preferences all have only components that are one type of sensor, however headspace has components of three different sensors T/H, CO2, and Lidar
    const [headspaceTH, setHeadspaceTH] = useState<Headspace[]>([]) //the components in the headspace that measure temp/humidity
    const [headspaceCO2, setHeadspaceCO2] = useState<CO2[]>([]) //the CO2 components in the headspace
    const [headspaceLidar, setHeadspaceLidar] = useState<Component[]>([]) //the lidar components in the headspace

    const [unassignedComponents, setUnassignedComponents] = useState<Component[]>([])

    //using counts so i dont have to have to check multiple arrays for sensors and controllers
    const [sensorCount, setSensorCount] = useState(0)
    const [controllerCount, setControllerCount] = useState(0)


    //organize the components into the correct 'positions' using the bins preferences
    useEffect(()=>{
        let unassigned: Component[] = []
        let cables: GrainCable[] = []
        let plenums: Plenum[] = []
        let ambients: Ambient[] = []
        let pressures: Pressure[] = []
        let fans: Controller[] = []
        let heaters: Controller[] = []
        let headspaceTH: Headspace[] = []
        let headspaceCO2: CO2[] = []
        let headspaceLidar: Component[] = []
        let sensorCount = 0
        let controllerCount = 0

        components.forEach(comp => {
            if(preferences){
                let pref = preferences.get(comp.key())
                switch(pref?.type){
                    case pond.BinComponent.BIN_COMPONENT_GRAIN_CABLE:
                        cables.push(GrainCable.create(comp))
                        sensorCount++
                        break;
                    case pond.BinComponent.BIN_COMPONENT_PLENUM:
                        plenums.push(Plenum.create(comp))
                        sensorCount++
                        break;
                    case pond.BinComponent.BIN_COMPONENT_AMBIENT:
                        ambients.push(Ambient.create(comp))
                        sensorCount++
                        break;
                    case pond.BinComponent.BIN_COMPONENT_PRESSURE:
                        pressures.push(Pressure.create(comp))
                        sensorCount++
                        break;
                    case pond.BinComponent.BIN_COMPONENT_FAN:
                        fans.push(Controller.create(comp))
                        controllerCount++
                        break;
                    case pond.BinComponent.BIN_COMPONENT_HEATER:
                        heaters.push(Controller.create(comp))
                        controllerCount++
                        break;
                    case pond.BinComponent.BIN_COMPONENT_HEADSPACE:
                        if (comp.type() === quack.ComponentType.COMPONENT_TYPE_DHT) {
                          headspaceTH.push(Headspace.create(comp));
                        } else if (comp.type() === quack.ComponentType.COMPONENT_TYPE_LIDAR) {
                          headspaceLidar.push(comp);
                        } else if (comp.type() === quack.ComponentType.COMPONENT_TYPE_CO2) {
                          let coComp = CO2.create(comp)
                          headspaceCO2.push(coComp);
                        }
                        sensorCount++
                        break;
                    default:
                        unassigned.push(comp)
                }
            }else{
                unassigned.push(comp)
            }
        })
        // console.log(cables)
        // console.log(unassigned)
        setCables(cables)
        setPlenums(plenums)
        setPressures(pressures)
        setAmbient(ambients)
        setFans(fans)
        setHeaters(heaters)
        setHeadspaceTH(headspaceTH)
        setHeadspaceCO2(headspaceCO2)
        setHeadspaceLidar(headspaceLidar)
        setUnassignedComponents(unassigned)
    },[components, preferences])

    const cableDisplay = (cable: GrainCable) => {
        return (
            <Box>
                
            </Box>
        )
    }

    return (
        <Box>
          {sensorCount > 0 &&
            <React.Fragment>
                <Typography>Sensors</Typography>
                {cables.length > 0 &&
                    <React.Fragment>
                        <Typography>Cables</Typography>
                        <Grid2 container>
                            {cables.map(cable => {
                                return(
                                    <Grid2 size={{xs: 6, xl: 4}}>
                                        {cableDisplay(cable)}
                                    </Grid2>
                                )
                            })}
                        </Grid2>
                    </React.Fragment>
                }
                {plenums.length }
            </React.Fragment>
          }

          <Typography>Controllers</Typography>
          {/* do all of the fans and heaters here */}

          <Typography>Unassigned Components</Typography>
          {/* list the components that have no assignment on the bin */}
        </Box>
    )
}