/**
 * @Move (SQDP)
 * Only used by the Acknowledgements module - move to Acknowledgements/
 */
import { FC, ReactNode, useId, useState } from 'react';

import Box from '@material-hu/mui/Box';
import BaseMenu from '@material-hu/mui/Menu';
import BaseMenuItem from '@material-hu/mui/MenuItem';
import { styled } from '@material-hu/mui/styles';

export type RenderTriggerProps = {
  ariaProps: object;
  handleOpen: (event: React.MouseEvent<HTMLButtonElement>) => void;
  open: boolean;
};

export type ContainerProps = {
  children: ReactNode | ((closeMenu: () => void) => ReactNode);
  renderTrigger: (props: RenderTriggerProps) => JSX.Element;
};

export const Container: FC<ContainerProps> = props => {
  const { children, renderTrigger } = props;

  const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null);
  const id = useId();
  const isOpen = Boolean(anchorEl);

  const handleOpen = (event: React.MouseEvent<HTMLButtonElement>) => {
    setAnchorEl(event.currentTarget);
  };

  const handleClose = () => {
    setAnchorEl(null);
  };

  return (
    <Box>
      {renderTrigger({
        ariaProps: {
          id,
          'aria-controls': isOpen ? 'basic-menu' : undefined,
          'aria-haspopup': 'true',
          'aria-expanded': isOpen ? 'true' : undefined,
        },
        handleOpen,
        open: isOpen,
      })}
      <BaseMenu
        id="basic-menu"
        anchorEl={anchorEl}
        open={isOpen}
        onClose={handleClose}
        MenuListProps={{
          'aria-labelledby': id,
          sx: { p: 0.5 },
        }}
      >
        {typeof children === 'function' ? children(handleClose) : children}
      </BaseMenu>
    </Box>
  );
};

export const Item = styled(BaseMenuItem)({
  borderRadius: '12px',
});

export const Menu = {
  Container,
  Item,
};

export default Menu;