import * as React from 'react';
import TextField from '@mui/material/TextField';
import Chip from '@mui/material/Chip';
import Autocomplete from '@mui/material/Autocomplete';

export default function GameAdder(props) {
  
  const [value, setValue] = React.useState([]);

  const emptyUuid = "00000000-0000-0000-0000-000000000000";

  return (
    <Autocomplete
        multiple
        id="tags-filled"
        options={props.games}
        value={value}
        getOptionLabel={(option) => option.name}
        freeSolo
        selectOnFocus
        renderTags={(value, getTagProps) =>
          value.map((option, index) => (
            <Chip variant="outlined" label={option.name} {...getTagProps({ index })} />
          ))
        }
        renderInput={(params) => (
          <TextField
            {...params}
            variant="filled"
            label="What games do you like to play?"
            placeholder="monopoly"
          />
        )}
        onChange={(event, newValue) => {
          newValue = newValue.map(option => {
            if (typeof option === 'string') {
              var match = props.games.find(g => g.name.toLowerCase() === option.toLowerCase());
              if(match !== undefined) {
                return match
              } else {
                return {id: emptyUuid, name: option};
              }
            }
            else {
              return option;
            }
          });

          newValue = newValue.filter((value, index, self) =>
            index === self.findIndex((t) => (
              t.id === value.id && t.name === value.name
            ))
          );
          setValue(newValue);
          props.onChange(newValue);
        }}
          
      />
  );
}