import { LabeledInput } from '@/components/ra-inputs/LabeledInput';
import { styled } from '@mui/material/styles';
import { SelectArrayInput as RaSelectArrayInput, SelectArrayInputProps } from 'react-admin';

const StyledSelectArrayInput = styled(RaSelectArrayInput, { slot: 'Root' })(({ label }) => ({
  '& legend': {
    width: label === false ? 0 : 'auto'
  },
  '& .MuiFormLabel-root.MuiInputLabel-root': {
    marginTop: '-3px'
  },
  '& .MuiInputLabel-root.MuiInputLabel-shrink': {
    marginTop: 0
  },
  '& .MuiOutlinedInput-input:has(.MuiChip-root)': {
    paddingTop: '4px',
    paddingBottom: '6px',
    paddingLeft: '6px'
  }
}));

function SelectArrayInput({ optionText = 'name', optionValue = 'id', ...props }: SelectArrayInputProps): JSX.Element {
  return (
    // @ts-ignore
    <LabeledInput {...props}>
      <StyledSelectArrayInput
        optionText={optionText}
        optionValue={optionValue}
        options={{
          autoWidth: false
        }}
      />
    </LabeledInput>
  );
}

export { SelectArrayInput };
export type { SelectArrayInputProps };