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";


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

  // 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={() => (
          <MonitoringStatusChip
            value = {value}
          />
        )}
        renderInput={(params) => (
          <MonitoringStatusChip
            value = {value}
          />
        )}
      />
    </Stack>
  );
}


// -------------renderinpurt ori
{/* <TextField
{...params}
variant="filled"
label="freeSolo"
placeholder="Favorites"
/> */}



// 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"},
];
