/* eslint-disable filenames/match-regex */
import { Close as CloseIcon } from '@mui/icons-material';
import { IconButton, Toolbar, Typography } from '@mui/material';
import { lighten, styled } from '@mui/material/styles';
import clsx from 'clsx';
import { Identifier, sanitizeListRestProps, useListContext, useTranslate } from 'ra-core';
import { Children, ReactNode, cloneElement, isValidElement, useCallback } from 'react';
import { TopToolbar } from 'react-admin';

function BulkActionsToolbar(props: BulkActionsToolbarProps): JSX.Element {
  const { label = 'ra.action.bulk_actions', children, className, ...rest } = props;
  const { filterValues, resource, selectedIds = [], onUnselectItems } = useListContext(props);

  const translate = useTranslate();

  const handleUnselectAllClick = useCallback(() => {
    onUnselectItems();
  }, [onUnselectItems]);

  return (
    <Root className={className}>
      <Toolbar
        data-test="bulk-actions-toolbar"
        className={clsx(BulkActionsToolbarClasses.toolbar, {
          [BulkActionsToolbarClasses.collapsed]: selectedIds.length === 0
        })}
        {...sanitizeListRestProps(rest)}
      >
        <div className={BulkActionsToolbarClasses.title}>
          <IconButton
            className={BulkActionsToolbarClasses.icon}
            aria-label={translate('ra.action.unselect')}
            title={translate('ra.action.unselect')}
            onClick={handleUnselectAllClick}
            size="small"
          >
            <CloseIcon fontSize="small" />
          </IconButton>
          <Typography color="inherit" variant="subtitle1">
            {translate(label, {
              _: label,
              // eslint-disable-next-line camelcase
              smart_count: selectedIds.length
            })}
          </Typography>
        </div>
        <TopToolbar className={BulkActionsToolbarClasses.topToolbar}>
          {Children.map(children, (child) =>
            isValidElement<any>(child)
              ? cloneElement(child, {
                  filterValues,
                  resource,
                  selectedIds
                })
              : null
          )}
        </TopToolbar>
      </Toolbar>
    </Root>
  );
}

const PREFIX = 'RaBulkActionsToolbar';

const BulkActionsToolbarClasses = {
  toolbar: `${PREFIX}-toolbar`,
  topToolbar: `${PREFIX}-topToolbar`,
  buttons: `${PREFIX}-buttons`,
  collapsed: `${PREFIX}-collapsed`,
  title: `${PREFIX}-title`,
  icon: `${PREFIX}-icon`
};

interface BulkActionsToolbarProps {
  children?: ReactNode;
  label?: string;
  selectedIds?: Identifier[];
  className?: string;
}

const Root = styled('div', {
  name: PREFIX,
  overridesResolver: (_, styles) => styles.root
})(({ theme }) => ({
  position: 'relative',
  [`& .${BulkActionsToolbarClasses.toolbar}`]: {
    position: 'absolute',
    left: 0,
    right: 0,
    zIndex: 3,
    color: theme.palette.mode === 'light' ? theme.palette.primary.main : theme.palette.text.primary,
    justifyContent: 'space-between',
    backgroundColor:
      theme.palette.mode === 'light' ? lighten(theme.palette.primary.light, 0.8) : theme.palette.primary.dark,
    minHeight: theme.spacing(6),
    height: theme.spacing(6),
    transform: `translateY(-${theme.spacing(6)})`,
    transition: `${theme.transitions.create('height')}, ${theme.transitions.create(
      'min-height'
    )}, ${theme.transitions.create('transform')}`,
    borderTopLeftRadius: theme.shape.borderRadius,
    borderTopRightRadius: theme.shape.borderRadius
  },

  [`& .${BulkActionsToolbarClasses.topToolbar}`]: {
    paddingBottom: theme.spacing(1),
    minHeight: 'auto',
    [theme.breakpoints.down('sm')]: {
      backgroundColor: 'transparent'
    }
  },

  [`& .${BulkActionsToolbarClasses.buttons}`]: {},

  [`& .${BulkActionsToolbarClasses.collapsed}`]: {
    minHeight: 0,
    height: 0,
    transform: `translateY(0)`,
    overflowY: 'hidden'
  },

  [`& .${BulkActionsToolbarClasses.title}`]: {
    display: 'flex',
    flex: '0 0 auto'
  },

  [`& .${BulkActionsToolbarClasses.icon}`]: {
    marginLeft: '-0.5em',
    marginRight: '0.5em'
  }
}));

export { BulkActionsToolbar };
export type { BulkActionsToolbarProps };