import { LabeledInput, LabeledInputProps } from '@/components/ra-inputs/LabeledInput';
import { styled } from '@mui/material/styles';
import {
  AutocompleteInput as RaAutocompleteInput,
  AutocompleteInputProps as RaAutocompleteInputProps
} from 'react-admin';

const StyledAutocompleteInput = styled(RaAutocompleteInput as any, {
  name: 'StyledAutocompleteInput'
})(({ label }) => ({
  '& legend': {
    width: label === false ? 0 : 'auto'
  },
  '& .MuiAutocomplete-inputRoot': {
    padding: `0px 9px`
  }
}));

type AutocompleteInputProps = RaAutocompleteInputProps & LabeledInputProps;

function AutocompleteInput({ size = 'small', ...props }: AutocompleteInputProps): JSX.Element {
  // Sanitize props removing "perPage":
  // @ts-ignore
  // eslint-disable-next-line @typescript-eslint/no-unused-vars
  const { perPage, ...rest } = props;
  return (
    // @ts-ignore
    <LabeledInput {...rest}>
      <StyledAutocompleteInput size={size} />
    </LabeledInput>
  );
}

export { AutocompleteInput };
export type { AutocompleteInputProps };