import TextField from '@mui/material/TextField';

const renderInput = (props) => <TextField {...props} label='Comment...' />;

export const MentionsTextfield: FC<MentionsTextfieldProps> = ({ options, value, onChange, disabled }) => {
  const inputRef = useRef<HTMLElement>(null);

  useEffect(() => {
    inputRef.current?.focus();
  }, []);

  return (
    <MentionsInput
      ref={inputRef}
      style={defaultStyleMentions}
      singleLine={false}
      disabled={disabled}
      value={value}
      onChange={onChange}
      renderInput={renderInput}
    >
      <Mention appendSpaceOnAdd displayTransform={(_, display) => `@${display} `} trigger='@' markup={MENTION_MARKUP} data={options} />
    </MentionsInput>
  );
};