import { ReferenceManyField, ReferenceManyFieldProps } from '@/components/ra-fields';
import { PropsWithChildren, ReactElement } from 'react';
import { ListToolbar, Pagination, ResourceContextProvider } from 'react-admin';

type ReferenceManyInputProps = PropsWithChildren<
  {
    reference: string;
    target: string;
    children: React.ReactNode;
    filters?: ReactElement;
    actions?: ReactElement;
  } & ReferenceManyFieldProps
>;

function ReferenceManyInput({
  reference,
  target,
  children,
  filters,
  actions,
  ...props
}: ReferenceManyInputProps): JSX.Element {
  return (
    <ResourceContextProvider value={reference}>
      <ReferenceManyField perPage={5} pagination={<Pagination />} {...props} reference={reference} target={target}>
        <>
          <ListToolbar filters={filters} actions={actions} />
          {children}
        </>
      </ReferenceManyField>
    </ResourceContextProvider>
  );
}

export { ReferenceManyInput };