/* eslint-disable filenames/match-regex */
import CloseIcon from '@mui/icons-material/Close';
import { Box, Fab, Fade, List, ListItem, Popover, Theme, useMediaQuery } from '@mui/material';
import * as React from 'react';
import { Button, useListContext } from 'react-admin';

const noSpaceOutside = {
  p: 0,
  m: 0
};
const moreSpaceInside = {
  p: 2,
  m: 0,
  borderRadius: 0,
  width: '100%'
};

function BulkFloatingActionsToolbar(props: BulkFloatingActionsToolbarProps): JSX.Element {
  const { children } = props;
  const [anchorEl, setAnchorEl] = React.useState<HTMLButtonElement | null>(null);

  function handleClick(event: React.MouseEvent<HTMLButtonElement>) {
    setAnchorEl(event.currentTarget);
  }

  function handleClose() {
    setAnchorEl(null);
  }
  const isSmall = useMediaQuery((theme: Theme) => theme.breakpoints.down('md'));
  const { filterValues, resource, selectedIds = [], onUnselectItems } = useListContext(props);
  const open = Boolean(anchorEl) && selectedIds !== undefined && selectedIds.length > 0;
  const id = open ? 'simple-popover' : undefined;

  const handleUnselectAllClick = React.useCallback(() => {
    onUnselectItems();
    setAnchorEl(null);
  }, [onUnselectItems, setAnchorEl]);

  return (
    <Fade in={selectedIds !== undefined && selectedIds.length > 0}>
      <Box
        sx={{
          position: 'fixed',
          bottom: '16px',
          right: '16px'
        }}
      >
        <Fab color="primary" aria-label="manage" onClick={handleClick}>
          {selectedIds?.length}
        </Fab>
        <Popover
          id={id}
          open={open}
          anchorEl={anchorEl}
          onClose={handleClose}
          anchorOrigin={{
            vertical: 'top',
            horizontal: isSmall ? 'center' : 'right'
          }}
          transformOrigin={{
            vertical: 'bottom',
            horizontal: isSmall ? 'center' : 'right'
          }}
          disableScrollLock
          elevation={10}
        >
          <List sx={noSpaceOutside}>
            <ListItem sx={noSpaceOutside}>
              <Button
                onClick={handleUnselectAllClick}
                sx={moreSpaceInside}
                label="ra.action.unselect"
                startIcon={<CloseIcon />}
              >
                <CloseIcon />
              </Button>
            </ListItem>
            {React.Children.map(children, (child) => (
              <ListItem sx={noSpaceOutside}>
                {React.isValidElement<any>(child)
                  ? React.cloneElement(child, {
                      filterValues,
                      resource,
                      selectedIds,
                      sx: moreSpaceInside,
                      ...(child.props?.popover ? { closePopover: handleClose } : {})
                    })
                  : null}
              </ListItem>
            ))}
          </List>
        </Popover>
      </Box>
    </Fade>
  );
}

interface BulkFloatingActionsToolbarProps {
  children?: React.ReactNode | React.ReactNode[];
}

export { BulkFloatingActionsToolbar };
export type { BulkFloatingActionsToolbarProps };