import * as React from "react";
import Autocomplete from "@mui/material/Autocomplete";
import TextField from "@mui/material/TextField";
import Stack from "@mui/material/Stack";
import { MonitoringStatusEditProps } from "./monitoringstatusEdit.types";
import { MonitoringStatusChip } from "./monitoringstatuschip";
import useTheme from "@mui/material/styles/useTheme";
import { red, orange, cyan, blue, green, grey } from "@mui/material/colors";
import HighlightOffOutlinedIcon from '@mui/icons-material/HighlightOffOutlined';
import PlayCircleFilledWhiteOutlinedIcon from '@mui/icons-material/PlayCircleFilledWhiteOutlined';
import StopIcon from '@mui/icons-material/Stop';
import Box from "@mui/material/Box";



 
export const MonitoringStatusEditChip = ({ value, onChange }: MonitoringStatusEditProps) => {
  const [val, setVal] = React.useState({value});
  const [receivers, setReceivers] = React.useState([]);
  const { palette } = useTheme();
  const isDarkMode = palette.mode === "dark";


  let color = "";


  // <TextField
  // id="input-with-icon-textfield"
  // label="TextField"
  // InputProps={{
  //   startAdornment: (
  //     <InputAdornment position="start">
  //       <AccountCircle />
  //     </InputAdornment>
  //   ),
  // }}


  const getIcon = (value:string) => {
    switch (value) {
      case "off":
        return (
          <HighlightOffOutlinedIcon
          sx={{fill: isDarkMode ? grey[200] : grey[600],}}
          />
      )

    case "started":
        return (
          <HighlightOffOutlinedIcon
          sx={{fill: isDarkMode ? grey[200] : grey[600],}}
          />
      )
      
    case "stopped":
      return (
        <HighlightOffOutlinedIcon
        sx={{fill: isDarkMode ? grey[200] : grey[600],}}
        />
      )

    }
  
    return (
      <HighlightOffOutlinedIcon
      sx={{fill: isDarkMode ? grey[200] : grey[600],}}
      />)
  }



  // renderOption={(props, option) => (
  //   <Box component="li" sx={{ '& > img': { mr: 2, flexShrink: 0 } }} {...props}>
  //     <img
  //       loading="lazy"
  //       width="20"
  //       srcSet={`https://flagcdn.com/w40/${option.code.toLowerCase()}.png 2x`}
  //       src={`https://flagcdn.com/w20/${option.code.toLowerCase()}.png`}
  //       alt=""
  //     />
  //     {option.label} ({option.code}) +{option.phone}
  //   </Box>
  // )}

  // const handleClick = () => {
  //   setVal(top100Films[0]); //you pass any value from the array of top100Films
  //   // set value in TextField from dropdown list
  // };


  return (
    <Stack spacing={1} sx={{ width: 500 }}>
      <Autocomplete
        id="MonitoringStatusChip"
        limitTags={1}
        options={chipSetting.map((option) => option.value)}
        defaultValue={value}
        onChange={onChange}
        renderOption={(props, option) => (
          <Box component="li" sx={{ '& > img': { mr: 2, flexShrink: 0 } }} {...props}>
          {getIcon(value)}
          {option}
        </Box>    
        )}
        renderInput={(params) => (
          <>
            <TextField
            {...params}
            variant="filled"
            
            label={value}
            />
          </> 
        )}
      />
    </Stack>
  );
}


// -------------renderinpurt ori



// renderTags={(value, getTagProps) =>
//   value.map((option, index) => (
//     <MonitoringStatusChip
//       value = {chipSetting[index].value}
//       {...getTagProps({ index })}                          
//     />

//   ))
// }




// renderTags={(value, getTagProps) =>
//   value.map((option, index) => (
//     <Chip
//       variant="outlined"
//       label={option}
//       {...getTagProps({ index })}
//     />
//   ))
// }


// Top 100 films as rated by IMDb users. http://www.imdb.com/chart/top
// const top100Films = [
//   { title: "The Shawshank Redemption", year: 1994 },
//   { title: "The Godfather", year: 1972 },
//   { title: "The Godfather: Part II", year: 1974 },
//   { title: "The Dark Knight", year: 2008 },
//   { title: "12 Angry Men", year: 1957 },
//   { title: "Schindler's List", year: 1993 },
//   { title: "Pulp Fiction", year: 1994 },
// ];


const chipSetting = [
  { value: "off" },
  { value: "started"},
  { value: "stopped"},
];
