import { styled } from '@mui/system';
import React from 'react';
import {
  Pagination,
  ReferenceManyField as RaReferenceManyField,
  ReferenceManyFieldProps as RaReferenceManyFieldProps
} from 'react-admin';

type StyledDivProps = {
  children?: React.ReactNode;
  className?: string;
};
type StyledRootProps = ReferenceManyFieldProps & {
  theme?: any;
  bulkActionButtons?: boolean | any;
};

function StyledDiv({ children = null, className = '' }: StyledDivProps) {
  return <div className={className}>{children}</div>;
}

const StyledRoot = styled(StyledDiv, { slot: 'root' })(({ theme, bulkActionButtons }: StyledRootProps) => {
  return {
    marginLeft: `-${theme.spacing(2.5)}`,
    marginRight: `-${theme.spacing(2.5)}`,
    // Access first child of the root div and align it to center
    // This "should" be the toolbar before the datagrid (remember: should be...).
    '&>div:first-of-type': {
      alignItems: 'center',
      '& form': {
        padding: theme.spacing(2.5)
      },
      '& .MuiToolbar-root': {
        alignItems: 'center',
        padding: '0 !important',
        marginTop: theme.spacing(1),

        [theme.breakpoints.up('sm')]: {
          marginLeft: theme.spacing(2),
          marginRight: theme.spacing(2),
          width: `calc(100% - ${theme.spacing(4)})`
        },
        [theme.breakpoints.down('md')]: {
          marginTop: 0,
          display: 'contents'
        }
      }
    },
    '& .RaDatagrid-root': {
      overflowX: 'auto',
      paddingTop: bulkActionButtons === false ? 0 : 48,
      [theme.breakpoints.down('sm')]: {
        width: 'calc(100vw - 26px)'
      },
      '& .RaBulkActionsToolbar-toolbar': {
        borderRadius: 0,
        '& > .RaBulkActionsToolbar-title': {
          alignItems: 'center'
        },
        [theme.breakpoints.down('sm')]: {
          paddingLeft: theme.spacing(3)
        }
      },
      '& .RaDatagrid-table': {
        borderBottom: `1px solid ${theme.palette.divider}`
      }
    },

    '& .MuiTablePagination-toolbar': {
      marginTop: '0 !important',
      marginBottom: '0 !important'
    },
    '& .RaBulkActionsToolbar-collapsed.RaBulkActionsToolbar-toolbar': {
      minHeight: 0
    }
  };
});

/**
 * This component allows you to manage the display of a list of records related to a main record.
 * This component is a customized version of the ReferenceManyField component of React-Admin.
 *
 * If you want to display records and not show the list of available actions (bulk action buttons)
 * you can set the bulkActionButtons prop to false and, subsequently, if you use an internal component of type <Datagrid />
 * you must set the same property, bulkActionButtons, to false (in this way the top padding of the <Datagrid /> component is completely removed).
 *
 * @example
 * import { ReferenceManyField, Datagrid } from '@applica-software-guru/react-admin';
 *
 * const MyComponent = (props) => (
 *  <ReferenceManyField {...props} bulkActionButtons={false}>
 *    <Datagrid bulkActionButtons={false}>
 *     ...
 *   </Datagrid>
 * </ReferenceManyField>
 */
function ReferenceManyField(props: ReferenceManyFieldProps): JSX.Element {
  return (
    <StyledRoot {...props}>
      {/** @ts-ignore */}
      <RaReferenceManyField pagination={<Pagination />} {...props} />
    </StyledRoot>
  );
}

type ReferenceManyFieldProps = RaReferenceManyFieldProps & {
  /**
   * Default undefined, serve ad aggiungere un padding superiore al componente per consentire
   * la visualizzazione della toolbar delle bulk action buttons.
   */
  bulkActionButtons?: boolean | any;
};

export { ReferenceManyField };
export type { ReferenceManyFieldProps };