import React, { useContext } from "react";
import MaterialMenuItem, { MenuItemProps } from "@material-ui/core/MenuItem";
import MenuItemFocus from "../MenuItemFocus";
import MenuContext from "../Menu/context";
import { getActiveClasses } from "../utility";

interface Props {
  onClick?: MenuItemProps["onClick"];
  children: React.ReactNode;
}
// TODO handle close through context
const MenuItem = React.forwardRef(
  ({ children, onClick, ...props }: Props, ref: React.Ref<HTMLLIElement>) => {
    const menuContext = useContext(MenuContext);

    return (
      <MaterialMenuItem
        {...props}
        disableRipple
        ref={ref}
        className={getActiveClasses([
          "auik-p-0 auik-flex hocus:auik-bg-transparent auik-items-center auik-px-4 auik-py-2 hocus:auik-bg-blue-100 auik-cursor-pointer auik-min-h-0 auik-text-base auik-leading-none",
          MenuItemFocus.ParentClasses
        ])}
        onClick={e => {
          onClick(e);
          menuContext.closeMenu();
        }}
      >
        <MenuItemFocus.Component />
        {children}
      </MaterialMenuItem>
    );
  }
);

export default MenuItem;