import { useTranslate, useUpdate } from "@refinedev/core";
import Chip from "@mui/material/Chip";
import type { ChipProps } from "@mui/material/Chip";
import CancelIcon from "@mui/icons-material/Cancel";
import CheckCircleIcon from "@mui/icons-material/CheckCircle";
import WatchLaterIcon from "@mui/icons-material/WatchLater";
import HighlightOffOutlinedIcon from '@mui/icons-material/HighlightOffOutlined';
import PlayCircleFilledWhiteOutlinedIcon from '@mui/icons-material/PlayCircleFilledWhiteOutlined';
import StopIcon from '@mui/icons-material/Stop';
import NotificationsIcon from "@mui/icons-material/Notifications";
import MopedIcon from "@mui/icons-material/Moped";
import { useTheme } from "@mui/material/styles";
import { red, orange, cyan, blue, green, grey } from "@mui/material/colors";
import { ForkLeft, PersonAdd } from "@mui/icons-material";
import { useState } from "react";
import MenuList from "@mui/material/MenuList";
import MenuItem from "@mui/material/MenuItem";
import ListItemIcon from "@mui/material/ListItemIcon";
import ListItemText from "@mui/material/ListItemText";
import Menu from "@mui/material/Menu";
import { ReactJSXElement } from "@emotion/react/types/jsx-namespace";


type MonitoringStatusProps = {
  objId: string;
  //dataProviderName: string;
  onChange: (value: string ) => void;
  status: "off" | "started" | "stopped";
};

// type MonitoringStatusProps = {
//   status?: "off" | "started" | "stopped";
// };


//export const MonitoringStatus = ({ objId, dataProviderName, status }: MonitoringStatusProps) => {
export const MonitoringStatus = ({ objId, status , onChange}: MonitoringStatusProps) => {
  const t = useTranslate();
  const { palette } = useTheme();
  const isDarkMode = palette.mode === "dark";
  const { mutate } = useUpdate();
  const dataProviderName =  "monitoringstatus";

  //const [showMenuState,setMenuState] = useState<boolean>(true);
  
  let color = "";
  let icon: ChipProps["icon"];
  const CMDSTART: string = "/start";
  const CMDSTOP: string  = "/stop";
  const CMDOFF: string   = "/off";

  const STARTED = "started";
  const STOPPED = "stopped";
  const OFF     = "off";

  const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null);
  const open = Boolean(anchorEl);  // is for handling the menu for a icon button https://mui.com/material-ui/react-menu/
  const handleClick = (event: React.MouseEvent<HTMLElement>) => {
    setAnchorEl(event.currentTarget);
  };

  const handleClose = () => {
    setAnchorEl(null);
  };

  
  const handleStartClick = () => {
    // set the statzs Property with the new value
    setAnchorEl(null);
    onChange('started');
    // mutate({
    //   resource: dataProviderName,
    //   id: objId,
    //   values: {
    //     status: "started",
    //   },
    // });
  };


  const handleStopClick = () => {
    // set the statzs Property with the new value
    setAnchorEl(null);
    onChange('stopped');

    // mutate({
    //   resource: dataProviderName,
    //   id: objId,
    //   values: {
    //     status: "stopped",
    //   },
    // });
  };

  const handleOffClick = () => {
    // set the statzs Property with the new value
    setAnchorEl(null);
    onChange('off');

    // mutate({
    //   resource: dataProviderName,
    //   id: objId,
    //   values: {
    //     status: "off",
    //   },
    // });
  };


  // const handleMenuClick = (evenbr: React.MouseEventHandler<HTMLLIElement>, newstatus: string) => {
  //   // set the statzs Property with the new value
  //   setAnchorEl(null);

  //   mutate({
  //     resource: {dataProviderName}+"/setStatus",
  //     id,
  //     values: {
  //       status: {newstatus},
  //     },
  //   });
  // };


  const showMenu = (status: string, compare: string) : boolean => {
    if (status === compare) {
      return false;
    }
    return true;
  }



  switch (status) {
    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;
  }

  const getMonMenu  = () : JSX.Element[] => {
    let monMenu: JSX.Element[] = []

    if (showMenu(status, STARTED)) {
      monMenu.push(<MenuItem key={1} id="chip-menu-Item-1" onClick={handleStartClick}>
                    <ListItemIcon>
                    <PlayCircleFilledWhiteOutlinedIcon
                    sx={{
                      fill: isDarkMode ? green[200] : green[600],
                    }}
                    />
                    </ListItemIcon>
                    Start
                  </MenuItem>)
    }

    if (showMenu(status, STOPPED)) {
      monMenu.push(<MenuItem key={2} id="chip-menu-Item-2" onClick={handleStopClick}>
                    <ListItemIcon>
                    <StopIcon
                    sx={{
                      fill: isDarkMode ? red[200] : red[600],
                    }}
                    />
                    </ListItemIcon>
                    Stop
                  </MenuItem>)
    }

    if (showMenu(status, OFF)) {
      monMenu.push(<MenuItem key={3} id="chip-menu-Item-3" onClick={handleOffClick}>
                    <ListItemIcon>
                    <HighlightOffOutlinedIcon
                    sx={{
                      fill: isDarkMode ? grey[200] : grey[600],
                    }}
                    />
                    </ListItemIcon>
                    Deactivate
                 </MenuItem>)
    }
    return monMenu;
  }

  // let chipMenu  = null;

  // if(showMenuState === true) {
  //   //show the menu
  //   chipMenu = () => {
  //     return (
  //       <div>
  //         <MenuList>
  //           <MenuItem>
  //             <ListItemIcon>
  //             </ListItemIcon>
  //             <ListItemText>Start</ListItemText>
  //           </MenuItem>
  //         </MenuList>
  //       </div>

  //     );
  //   }
  // }


  return (
    <div>
      <Chip
        key="MonChip"
        id="MonChip1"
        variant="outlined"
        size="medium"
        icon={icon}
        sx={{
          borderColor: color,
          color: color,
          width:100,
          alignItems: "center",
          justifyContent: "left",
        }}
        label={status}
        onClick={handleClick}
      />
      <Menu
        anchorEl={anchorEl}
        key="monchip-menu"
        id="monStatus-menu"
        open={open}
        onClose={handleClose}
        onClick={handleClose}
      >
        {getMonMenu()}
      </Menu>
    </div>
  );
};













//
// {  showMenuState ? 
//   (
//     <div>
//       <Menu
//         anchorEl={anchorEl}
//         id="account-menu"
//         open={open}
//         onClose={handleClose}
//         onClick={handleClose}
//       >
//         <MenuItem onClick={handleClose}>
//           <ListItemIcon>
//           <HighlightOffOutlinedIcon
//             sx={{
//               fill: isDarkMode ? grey[200] : grey[600],
//             }}
//           />
//           </ListItemIcon>
//           Start
//         </MenuItem>
//       </Menu>
//     </div>
//   )
//   : null
// }









// PaperProps={{
//   elevation: 0,
//   sx: {
//     overflow: 'visible',
//     filter: 'drop-shadow(0px 2px 8px rgba(0,0,0,0.32))',
//     mt: 1.5,
//     '& .MuiAvatar-root': {
//       width: 32,
//       height: 32,
//       ml: -0.5,
//       mr: 1,
//     },
//     '&::before': {
//       content: '""',
//       display: 'block',
//       position: 'absolute',s
//       top: 0,
//       right: 14,
//       width: 10,
//       height: 10,
//       bgcolor: 'background.paper',
//       transform: 'translateY(-50%) rotate(45deg)',
//       zIndex: 0,
//     },
//   },
// }
// }



// <div>
// <MenuList>
//   <MenuItem>
//     <ListItemIcon>
//     </ListItemIcon>
//     <ListItemText>Start</ListItemText>
//   </MenuItem>
// </MenuList>
// </div>




// <>
// <Tooltip title="More">
//   <IconButton aria-label="more" onClick={onClick} size="small" data-testid="more">
//     <MoreHorizIcon fontSize="small" />
//   </IconButton>
// </Tooltip>
// {state.contextMenuAnchorElement ? (
//   <ProjectContextMenu
//     menuAnchor={state.contextMenuAnchorElement}
//     project={project}
//     onChange={onChange}
//     onClose={onCloseContextMenu}
//   />
// ) : null}
// </>

// label={t(`enum.orderStatuses.${status}`)}

// case "Delivered":
//   color = isDarkMode ? green[200] : green[800];
//   icon = (
//     <CheckCircleIcon
//       sx={{
//         fill: isDarkMode ? green[200] : green[600],
//       }}
//     />
//   );mutate
//   break;
// case "Cancelled":
//   color = isDarkMode ? red[200] : red[800];
//   icon = (
//     <CancelIcon
//       sx={{
//         fill: isDarkMode ? red[200] : red[600],
//       }}
//     />s
//   );
//   break;




// ---------------------------------

// { showMenu(status, STARTED) ?
//   [
//   <>
//     <MenuItem onClick={handleClose}>
//       <ListItemIcon>
//       <PlayCircleFilledWhiteOutlinedIcon
//       sx={{
//         fill: isDarkMode ? green[200] : green[600],
//       }}
//     />
//       </ListItemIcon>
//       Start
//     </MenuItem>
//   </> 
//   ]
//   : []
// }
// { showMenu(status, STOPPED) ?
//   [        
//   <>
//     <MenuItem onClick={handleClose}>
//       <ListItemIcon>
//       <StopIcon
//       sx={{
//         fill: isDarkMode ? red[200] : red[600],
//       }}
//     />
//       </ListItemIcon>
//       Stop
//     </MenuItem>
//   </>
//   ]
//   : []
// }
// { showMenu(status, OFF) ?
  
//   <>
//     <MenuItem onClick={handleClose}>
//       <ListItemIcon>
//       <HighlightOffOutlinedIcon
//         sx={{
//           fill: isDarkMode ? grey[200] : grey[600],
//         }}
//       />
//       </ListItemIcon>
//       Deactivate
//     </MenuItem>
//   </>
  
//   : null
// }



