import React, { forwardRef } from "react";
import classNames from "classnames";
import { bem } from "../../utilities/bem";
import { useMenuContext } from "../MenuRenderer";

const cn = "Menu";

export interface MenuItemProps {
  as?: any;
  onClick?: (event: MouseEvent) => void;
  isSelected?: boolean;
  isHighlighted?: boolean;
  disabled?: boolean;
  closeOnSelect?: boolean;
  [key: string]: any;
}

export const MenuItem = forwardRef<MenuItemProps, any>(
  (
    {
      children,
      className,
      isSelected = false,
      isHighlighted = false,
      disabled = false,
      closeOnSelect: itemCloseOnSelect,
      as: Component = "button",
      onClick,
      ...rest
    },
    ref,
  ) => {
    const {
      onClose,
      itemProps,
      closeOnSelect: contextCloseOnSelect,
    } = useMenuContext();

    const closeOnSelect = itemCloseOnSelect ?? contextCloseOnSelect;

    const clickHandler = (event: MouseEvent) => {
      if (typeof onClick === "function") {
        onClick(event);
      }
      if (typeof onClose === "function" && closeOnSelect) {
        onClose();
      }
    };

    return (
      <Component
        ref={ref}
        className={classNames([
          bem(cn, { e: "item" }),
          isSelected && bem(cn, { e: "item", m: "isSelected" }),
          isHighlighted && bem(cn, { e: "item", m: "isHighlighted" }),
          disabled && bem(cn, { e: "item", m: "isDisabled" }),
          className,
        ])}
        onClick={clickHandler}
        disabled={disabled}
        {...itemProps}
        {...rest}
      >
        {children}
      </Component>
    );
  },
);