import React from 'react';
import Autocomplete from '@material-ui/lab/Autocomplete';
import TextField from '@material-ui/core/TextField';
import FormControl from '@material-ui/core/FormControl';
import { FormHelperText } from '@material-ui/core';
interface MultiSelectDropDownCompProps<T> {
  options: T[]; 
  label: string;
  value: T | null; 
  getOptionLabel: (option: T) => string; 
  getOptionId: (option: T) => string | number; 
  onChange: (event: React.ChangeEvent<{}>, value: T | null) => void;
  name: string;
  error?: any;
  disabled?: boolean;
}

const MultiSelectDropDownComp = <T,>({
  options,
  label,
  value,
  getOptionLabel,
  getOptionId,
  onChange,
  name,
  error,
  disabled = false
}: MultiSelectDropDownCompProps<T>) => {

  return (
    <FormControl fullWidth variant="outlined" >
      <Autocomplete
        options={options}
        getOptionLabel={getOptionLabel}
        value={options?.find(option => getOptionId(option) === value) || null} 
        fullWidth
        onChange={onChange}
        disabled={disabled} 
        renderInput={(params) => (
          <TextField
            {...params}
            label={label}
            variant="outlined"
            name={name}
            error={!!error}
          />
        )}
      />
      <FormHelperText style={{ color: "#f44336" }}>{error}</FormHelperText>
    </FormControl>

  );
};

export default MultiSelectDropDownComp;