import MenuItem from "@mui/material/MenuItem";
import { Checkbox } from "../Checkbox";
import React, { forwardRef, RefObject } from "react";
import "./Menu.styles.scss";
import { ListItemIcon } from "@mui/material";
import ChevronRightIcon from "@mui/icons-material/ChevronRight";

export const IconMenuItem = forwardRef(function IconMenuItem(
  {
    MenuItemProps,
    className,
    item,
    handleSelect,
    // grab any onClick passed from parent (nestedMenuItemsFromObject)
    onClick: externalOnClick,
    icon,
    renderLabel,
    withCheckbox,
    selectedItems,
    selected,
    children,
    childOpen = false,
    ...props
  },
  ref
) {
  const internalOnClick = (e) => {
    // legacy behavior: item has its own onClick/callback
    return item?.onClick ? item.onClick(item.value, e) : undefined;
  };

  const composedOnClick = (e) => {
    // If checkbox mode: prefer handleSelect, else prefer externalOnClick -> internal
    if (withCheckbox) {
      if (typeof handleSelect === "function") {
        // keep old signature handleSelect(item, event)
        return handleSelect(item, e);
      }
      // fallback to external onClick if provided
      if (typeof externalOnClick === "function")
        return externalOnClick(e, item);
      return internalOnClick(e);
    }

    // non-checkbox mode
    if (typeof externalOnClick === "function") return externalOnClick(e, item);
    return internalOnClick(e);
  };

  return (
    <MenuItem
      {...props}
      key={item?.label}
      ref={ref}
      disabled={item?.disabled}
      onClick={composedOnClick}
      disableRipple
      disableTouchRipple
      selected={
        withCheckbox
          ? selectedItems.includes(item?.value)
          : selected === item?.value
      }
      disablePortal
      disableScrollLock
      {...MenuItemProps}
      className={
        className
          ? `${className} ${childOpen && "child-hover"}`
          : childOpen && "child-hover"
      }
    >
      <div className="ia-list-body">
        {withCheckbox && !item?.section && (
          <div className="ia-menu-checkbox">
            <Checkbox
              variant="default"
              disabled={item?.disabled}
              checked={selectedItems.includes(item?.value)}
            />
          </div>
        )}
        {item.icon && (
          <ListItemIcon className="ia-list-icon">{item.icon}</ListItemIcon>
        )}
        {item?.section ? (
          <div className="menu-section-header">{item.section}</div>
        ) : (
          <div className="ia-list-label-container">
            <div className="ia-list-label">{item?.label}</div>
            {item?.subLabel && (
              <div className="ia-list-sublabel">{item.subLabel}</div>
            )}
          </div>
        )}
      </div>
      {item?.rightIcon ? item?.rightIcon : children && <ChevronRightIcon />}
    </MenuItem>
  );
});
