import { LabeledInput } from '@/components/ra-inputs/LabeledInput';
import { styled } from '@mui/material/styles';
import { AutocompleteArrayInputProps, AutocompleteArrayInput as RaAutocompleteArrayInput } from 'react-admin';

// @ts-ignore
const StyledAutocompleteArrayInput = styled(RaAutocompleteArrayInput, {
  name: 'StyledAutocompleteInput',
  root: 'root'
})(({ label }) => ({
  '& legend': {
    width: label === false ? 0 : 'auto'
  },
  '& .MuiAutocomplete-inputRoot': {
    padding: `0px 9px`
  },
  '& .MuiOutlinedInput-root.MuiInputBase-sizeSmall:has(.MuiChip-root)': {
    paddingBottom: '4px'
  },
  '& .MuiAutocomplete-tag': {
    margin: '0px 4px 4px 0px'
  }
}));

function AutocompleteArrayInput({ size = 'small', ...props }: AutocompleteArrayInputProps): JSX.Element {
  return (
    // @ts-ignore
    <LabeledInput {...props}>
      <StyledAutocompleteArrayInput size={size} />
    </LabeledInput>
  );
}

export { AutocompleteArrayInput };
export type { AutocompleteArrayInputProps };