import { LabeledArrayInput, LabeledArrayInputProps } from '@/components/ra-inputs/LabeledArrayInput';
import { styled } from '@mui/material/styles';
import { ArrayInput as RaArrayInput, ArrayInputProps as RaArrayInputProps } from 'react-admin';

const StyledArrayInput = styled(RaArrayInput, { slot: 'root' })(({ theme }) => ({
  '& .MuiStack-root > label': {
    marginTop: theme.spacing(2)
  },
  '& .MuiInputLabel-shrink': {
    paddingBottom: 0
  },
  marginTop: '0 !important',
  '& .RaSimpleFormIterator-line > .RaSimpleFormIterator-form': {
    paddingBottom: theme.spacing(0.5),
    '& > div': {
      width: '100%'
    }
  }
}));

/**
 * Expose an ArrayInput component with Applica graphic style.
 * If you want to use the pure react-admin component you can use RaArrayInput exposed in the library.
 */
function ArrayInput({
  label,
  addLabel,
  source,
  helperText,
  divider = true,
  ...props
}: ArrayInputProps): React.ReactElement {
  return (
    <LabeledArrayInput
      label={label}
      addLabel={addLabel}
      source={source}
      helperText={helperText}
      divider={divider}
      fullWidth={props?.fullWidth}
    >
      <StyledArrayInput source={source} label={false} {...props} />
    </LabeledArrayInput>
  );
}

type ArrayInputProps = RaArrayInputProps &
  LabeledArrayInputProps & {
    divider?: boolean;
  };

export { ArrayInput };
export type { ArrayInputProps };