import { StyledArrow } from './styles';
import { getPosition } from '@/components/MenuPopover/getPosition';
import { Arrow } from '@/components/MenuPopover/types';
import { Popover } from '@mui/material';
import { PropsWithChildren } from 'react';

type MenuPopoverProps = PropsWithChildren<{
  open: HTMLElement;
  arrow?: Arrow;
  disabledArrow?: boolean;
  sx?: object;
}>;

function MenuPopover({ open, children, arrow = 'top-right', disabledArrow, sx, ...other }: MenuPopoverProps) {
  const { style, anchorOrigin, transformOrigin } = getPosition(arrow);

  return (
    <Popover
      open={Boolean(open)}
      anchorEl={open}
      anchorOrigin={anchorOrigin}
      transformOrigin={transformOrigin}
      keepMounted
      PaperProps={{
        sx: {
          p: 1,
          width: 'auto',
          overflow: 'inherit',
          ...style,
          '& .MuiMenuItem-root': {
            px: 1,
            typography: 'body2',
            borderRadius: 0.75,
            '& svg': { mr: 2, width: 20, height: 20, flexShrink: 0 }
          },
          ...sx
        }
      }}
      {...other}
    >
      {/** @ts-ignore */}
      {!disabledArrow && <StyledArrow arrow={arrow} />}
      {children}
    </Popover>
  );
}

export { MenuPopover };