frontend/src/common/StatusDust.tsx

import { Box, Grid2, Theme, Tooltip, Typography } from "@mui/material";
import { green } from "@mui/material/colors";
import { makeStyles } from "@mui/styles";
import { Device } from "models";
import PulseBox from "./PulseBox";
import { or } from "utils";
import { useEffect, useState } from "react";
interface Props {
  device: Device
}

const useStyles = makeStyles((theme: Theme) => {
  const lightMode = theme.palette?.mode === "light";
  return ({
    box: {
      display: "inline-block",
      borderRadius: "6px",
      backgroundColor: lightMode ? "rgb(210, 210, 210)" : "rgb(50, 50, 50)",
      padding: theme.spacing(0.75),
      marginRight: "auto",
      margin: theme.spacing(1),
      width: theme.spacing(16),
      height: theme.spacing(11),
    },
    carouselContainer: {
      position: 'relative',
      height: '40px',
      overflow: 'hidden',
      textAlign: "center",
    },
    carouselItem: {
      opacity: 0,
      transform: 'translateX(100%)',
      transition: 'opacity 0.5s ease, transform 0.5s ease',
      position: 'absolute',
      width: '100%',
      overflow: "hidden",
      // height: '100%',
    },
    active: {
      opacity: 1,
      transform: 'translateX(0)',
    },
    inactive: {
      transform: 'translateX(-100%)',
    },
  })
})

export default function StatusDust(props: Props) {
  const { device } = props;
  const classes = useStyles()

  const colors = or(device.status.sen5x?.overlays.map(overlay => overlay.color), []);
  const messages = or(device.status.sen5x?.overlays.map(overlay => overlay.message), []);

  const [color, setColor] = useState(colors.length > 0 ? colors[0] : "");
  const [, setColorIndex] = useState(0)

  useEffect(() => {
    const interval = setInterval(() => {
      setColorIndex(prevIndex => {
        const newIndex = prevIndex >= colors.length - 1 ? 0 : prevIndex + 1;
        setColor(colors[newIndex]); // Use the new index here
        return newIndex;
      });
    }, 7500);
    
    return () => clearInterval(interval);
  }, []);

  // const [currentIndex, setCurrentIndex] = useState(0);

  // Auto-cycle through measurements every 3 seconds
  // useEffect(() => {
  //   const interval = setInterval(() => {
  //     setCurrentIndex((prevIndex) => (prevIndex + 1) % 2);
  //   }, 3000); // Adjust timing as needed (3000ms = 3s)

  //   return () => clearInterval(interval); // Cleanup on unmount
  // }, []);

  const tooltip = () => {
    if (messages.length === 0) return null
    if (messages.length < 2) return (
      messages[0]
    )
    return (
      <Grid2 container direction={"column"}>
        <Grid2 container direction="row">
          <Typography fontWeight={"bold"} variant="caption">
            Overlay Messages
          </Typography>
        </Grid2>
        {messages.map((message, index) => {
          return (
            <Grid2 key={"tooltip-overly-message-" + message} container direction="row" alignItems={"center"}>
              <Box
                sx={{
                  width: 10, // Size of the square
                  height: 10,
                  backgroundColor: colors[index], // Passed color prop
                  borderRadius: 1, // Optional: slight rounding, remove for sharp square
                  border: "1px solid black",
                }}
              />
              <Typography variant="caption" sx={{ marginLeft: 1 }}>
                {message}
              </Typography>
            </Grid2>
          )
        })}
      </Grid2>
    )
  }

  return (
    <Tooltip title={tooltip()}>
      <PulseBox color={color} className={classes.box} >
        <Grid2 container direction="column" >
          <Grid2 container direction="column" 
            className={`${classes.carouselItem} ${classes.active }`}
          >
            <Grid2>
              <Typography variant="body2" style={{ color: green[300]}}>
                {"<1um:"} {device.status.sen5x?.dust1ug.toFixed(1)}ug/m3
              </Typography>
            </Grid2>
            <Grid2>
              <Typography variant="body2" style={{ color: green[400]}}>
                {"<2.5um:"} {device.status.sen5x?.dust2ug.toFixed(1)}ug/m3
              </Typography>
            </Grid2>
            <Grid2>
              <Typography variant="body2" style={{ color: green[500]}}>
                {"<4um: "}{device.status.sen5x?.dust4ug.toFixed(1)}ug/m3
              </Typography>
            </Grid2>
            <Grid2>
              <Typography variant="body2" style={{ color: green[600]}}>
                {"<10um: "}{device.status.sen5x?.dust10ug.toFixed(1)}ug/m3
              </Typography>
            </Grid2>
          </Grid2>
        </Grid2>
      </PulseBox>
    </Tooltip>
  )
}