import { useTranslate } from "@refinedev/core";
import Chip from "@mui/material/Chip";
import type { ChipProps } from "@mui/material/Chip";
import HighlightOffOutlinedIcon from '@mui/icons-material/HighlightOffOutlined';
import PlayCircleFilledWhiteOutlinedIcon from '@mui/icons-material/PlayCircleFilledWhiteOutlined';
import StopIcon from '@mui/icons-material/Stop';
import { useTheme } from "@mui/material/styles";
import { red, orange, cyan, blue, green, grey } from "@mui/material/colors";
import { MonitoringStatusChipProps } from "./monitoringstatuschip.types";



export const MonitoringStatusChip = ({ value }: MonitoringStatusChipProps) => {
  const t = useTranslate();
  const { palette } = useTheme();
  const isDarkMode = palette.mode === "dark";
  
  let color = "";
  let icon: ChipProps["icon"];


  switch (value) {
    case "off":
      color = isDarkMode ? grey[200] : grey[800];
      icon = (
        <HighlightOffOutlinedIcon
          sx={{
            fill: isDarkMode ? grey[200] : grey[600],
          }}
        />
      );
      break;
    case "started":
      color = isDarkMode ? green[200] : green[800];
      icon = (
        <PlayCircleFilledWhiteOutlinedIcon
          sx={{
            fill: isDarkMode ? green[200] : green[600],
          }}
        />
      );
      break;
    case "stopped":
      color = isDarkMode ? red[200] : red[800];
      icon = (
        <StopIcon
          sx={{
            fill: isDarkMode ? red[200] : red[600],
          }}
        />
      );
      break;
  }


  return (
    <div>
      <Chip
        variant="outlined"
        size="medium"
        icon={icon}
        sx={{
          borderColor: color,
          color: color,
          width:100,
          alignItems: "center",
          justifyContent: "left",
        }}
        label={value}
      />
    </div>
  );
};



