import React, { useMemo } from 'react';
import PropTypes from 'prop-types';

import { Autocomplete, TextField } from '@/mui/components';

function ChipInput({ placeholder = 'Enter Label', inputHint = 'For creating label press Enter', ...props }) {
  const options = useMemo(() => [], []);

  return (
    <Autocomplete
      freeSolo
      size="small"
      value={props.labels}
      multiple
      options={options}
      renderInput={(params) => <TextField {...params} helperText={inputHint} placeholder={placeholder} />}
      onChange={(e, data) => props.onChange({ labels: data })}
    />
  );
}

ChipInput.propTypes = {
  labels: PropTypes.arrayOf(PropTypes.shape({})).isRequired,
  onChange: PropTypes.func.isRequired,
  placeholder: PropTypes.string,
  inputHint: PropTypes.string,
};

export default ChipInput;
