autocomplete

/* eslint-disable no-use-before-define */
import React, { Dispatch, useState } from 'react';
import Chip from '@material-ui/core/Chip';
import Autocomplete from '@material-ui/lab/Autocomplete';
import { createStyles, makeStyles, Theme } from '@material-ui/core/styles';
import TextField from '@material-ui/core/TextField';
import { useSelector } from 'react-redux';
import { RootStore } from '../Store';
import { RepoDispatchTypes, RepoXType } from '../actions/RepoActionTypes';

const useStyles = makeStyles((theme: Theme) =>
  createStyles({
    root: {
      // display: 'flex',
      // flexDirection: 'column',
      // justifyContent: 'center',
      // alignItems: 'center',
      width: '50%',
      // '& > * + *': {
      //   marginTop: theme.spacing(3),
      // },
    },
  }),
);

export default function Tags() {

  const classes = useStyles();

  const repoState = useSelector((state: RootStore) => state.repo);
  let repoList: RepoXType[] = [];
  let names = [];

  if(repoState.user?.allRepo)
  {
    repoList = repoState.user.allRepo;

    // repoList.map(item => {
    //   names.push(item.name);
    // });
  }
  const [input, setInput] = React.useState<RepoXType | null>()
  const Register = (v: any) => async (dispatch: Dispatch<RepoDispatchTypes>) => {

    setInput(v);
    console.log(v);

  };

  // const handleChange = (values: any) => dispatch(Register(values));
  const [selectValue, setSelectValue] = useState();



  return (
    <div className={classes.root}>
      <Autocomplete
        multiple
        id="tags-standard"
        options={repoList}
        getOptionLabel={(option: RepoXType) => option.name}
        // onChange={handleChange(e,values)}
        //defaultValue={[top100Films[13]]}
        //onChange={(e,v) => handleChange(v)}
         renderInput={(params) => (
          <TextField
            {...params}
            variant="standard"
            label="Repositories"
            placeholder=""
          />
        )}
      />


      {/* <Autocomplete
      options={repoList}
      getOptionLabel={(option: RepoXType) => option.name}
      inputValue={"" | input.name}
      onChange={(e,v) => setInput(v)}
      style={{ width: 300 }}
      renderInput={(params) => (
        <TextField {...params} label="Combo box" onChange={({ target }) => setInput(target)} variant="outlined" fullWidth />
      )}
      /> */}






    </div>
  );
}


function dispatch(arg0: (dispatch: Dispatch<RepoDispatchTypes>) => Promise<void>) {
  throw new Error('Function not implemented.');
}
// 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: 'Monty Python and the Holy Grail', year: 1975 },
// ];

//==================================