import {FieldProps, WidgetProps} from "@rjsf/utils";
import AnyOfField from "@rjsf/core/lib/components/fields/MultiSchemaField";
import {ListSubheader, MenuItem, Select} from "@mui/material";
import {useState} from "react";
import Autocomplete from "@mui/material/Autocomplete";
import TextField from "@mui/material/TextField";

export const UnionEnumWidget = (props: WidgetProps) => {
  const {
    options,
    value,
  } = props;
  const [selectedValue, setSelectedValue] = useState(null);


  if (! selectedValue && value && options.enumOptions) {
    for (const opt of options.enumOptions){
       if (opt.value == value) {
         setSelectedValue(opt);
         break;
       }
    }
  }

  return (
    <Autocomplete
      value={selectedValue}
      onChange={(event, newValue) => {
          setSelectedValue(newValue);
          props.onChange(newValue.value);
      }}
      options={options.enumOptions}
      groupBy={(option) => option.type}
      getOptionLabel={(option) => option.title}
      renderInput={(params) => (
          <TextField {...params} label={ props.label } variant="outlined" />
      )}
    />
  );
}