import { Children, isValidElement, cloneElement } from 'react';
import { call } from 'utils/call';

interface MenuItemProps {
  onClick?: React.MouseEventHandler;
  children: React.ReactNode;
  key: string;
}

export const MenuItem = ({ onClick, children }: MenuItemProps) => {
  return (
    <div
      className="flyout-item paddingX4 flex justifyBetween"
      onClick={onClick}
    >
      {children}
    </div>
  );
};

export const Menu = ({
  onClick,
  onDismiss,
  children,
}: {
  onClick: (key: string) => void;
  onDismiss?: () => void;
  children:
    | React.ReactElement<MenuItemProps>
    | React.ReactElement<MenuItemProps>[];
}) => {
  const handleClick = (key: string) => {
    call(onClick, key);
    call(onDismiss);
  };
  const childrenWithProps = Children.map(children, (child) => {
    if (isValidElement(child)) {
      return cloneElement(child, {
        onClick: () => handleClick(child.key as string),
      } as {
        onClick: React.MouseEventHandler;
      });
    }
    return child;
  });
  return <div className="flyout">{childrenWithProps}</div>;
};