autocomplete.tsx

import { useEffect, useState } from 'react';
import { Paper, InputAdornment } from '@mui/material';
import { InlineLabelTextInput } from '../InlineLabelTextInput';
import { InlineLabelAutocomplete } from './InlineLabelAutocomplete';
import { LinkButtonGrey } from './InlineLabelAutocomplete.styled';
import { DeletableChip } from '../../../Chips';

const emailAddresses = [
  '[email protected]',
  '[email protected]',
  '[email protected]',
  '[email protected]',
  '[email protected]',
  '[email protected]',
  '[email protected]',
  '[email protected]',
  '[email protected]',
  '[email protected]',
];

export function Dev({ addMeEmailId }: { addMeEmailId: string }) {
  const [values, setValues] = useState<string[]>([]);
  const [inputValue, setInputValue] = useState('');

  const [isAddMeSelected, setIsAddMeSelected] = useState(false);

  useEffect(() => {
    if (addMeEmailId) {
      if (values.includes(addMeEmailId)) {
        setIsAddMeSelected(true);
      } else {
        setIsAddMeSelected(false);
      }
    }
  }, [values]);

  function AddMe() {
    setValues((s) => [...s, addMeEmailId]);
  }

  return (
    <Paper sx={{ padding: 12 }}>
      <InlineLabelAutocomplete
        freeSolo
        multiple
        value={values}
        onChange={(_, newValue: string[]) => {
          setValues(newValue);
        }}
        inputValue={inputValue}
        onInputChange={(_, newInputValue) => {
          setInputValue(newInputValue);
        }}
        options={emailAddresses}
        renderInput={(params) => (
          <InlineLabelTextInput
            {...params}
            label="to"
            InputProps={{
              ...params.InputProps,
              endAdornment: !isAddMeSelected && (
                <InputAdornment position="end">
                  <LinkButtonGrey underline onClick={AddMe}>
                    Add Me
                  </LinkButtonGrey>
                </InputAdornment>
              ),
            }}
          />
        )}
        renderTags={(value: string[], getTagProps) =>
          value.map((option: string, index: number) => (
            <DeletableChip
              size="small"
              label={option}
              {...getTagProps({ index })}
            />
          ))
        }
      />
    </Paper>
  );
}