import { jsx, jsxs } from "react/jsx-runtime";
import * as React from "react";
import { cva } from "class-variance-authority";
import { cn } from "../../lib/utils.js";
import { Checkbox } from "../Checkbox/checkbox.js";
import { Avatar } from "../Avatar/avatar.js";
import { ICON_SIZE, AVATAR_SIZE, itemPrefixAlignVariants, ItemContent, ROW_PADDING_BY_SIZE } from "../../patterns/element-anatomy/item-anatomy.js";
const CHECKBOX_SIZE = { sm: "sm", md: "md", lg: "lg" };
const menuItemVariants = cva(
  [
    "flex items-start gap-2 px-3 w-full",
    "cursor-pointer select-none",
    "transition-colors duration-150",
    "outline-none",
    "focus-visible:bg-neutral-hover"
  ],
  {
    variants: {
      // 消費 ROW_PADDING_BY_SIZE SSOT(item-anatomy.tsx 導出)
      // 改一處 → 全 row primitive 自動同步(消除前 SidebarMenuButton 獨立實作 risk)
      size: ROW_PADDING_BY_SIZE
    },
    defaultVariants: {
      size: "md"
    }
  }
);
function lineClampClass(maxLines) {
  if (maxLines === "none" || !maxLines) return "";
  if (maxLines === 1) return "line-clamp-1";
  if (maxLines === 2) return "line-clamp-2";
  if (maxLines === 3) return "line-clamp-3";
  if (maxLines === 4) return "line-clamp-4";
  if (maxLines === 5) return "line-clamp-5";
  if (maxLines === 6) return "line-clamp-6";
  return "";
}
const MenuItem = React.forwardRef(
  ({
    children,
    description,
    startIcon: StartIcon,
    avatar,
    checkbox,
    checked,
    selected,
    tag,
    endContent,
    disabled,
    header,
    size,
    labelMaxLines = 1,
    descMaxLines = 1,
    className,
    ...props
  }, ref) => {
    const sizeKey = size ?? "md";
    const labelClampClass = lineClampClass(labelMaxLines);
    const descClampClass = lineClampClass(descMaxLines);
    const iconPx = ICON_SIZE[sizeKey];
    const avatarPx = avatar ? description ? AVATAR_SIZE.block[sizeKey] : AVATAR_SIZE.inline[sizeKey] : 0;
    const isBlockAlign = avatarPx > 24 && !!description;
    const prefixAlign = isBlockAlign ? `block-${sizeKey}` : "inline";
    const hasPrefix = !!StartIcon || !!avatar || checkbox;
    if (header) {
      return /* @__PURE__ */ jsx(
        "div",
        {
          ref,
          className: cn(
            menuItemVariants({ size }),
            "font-medium text-fg-muted cursor-default pointer-events-none",
            className
          ),
          role: "presentation",
          ...props,
          children
        }
      );
    }
    return /* @__PURE__ */ jsxs(
      "div",
      {
        ref,
        role: "option",
        "aria-selected": selected || checked === true || void 0,
        "aria-disabled": disabled || void 0,
        "data-selected": selected ? "" : void 0,
        "data-disabled": disabled ? "" : void 0,
        className: cn(
          menuItemVariants({ size }),
          !disabled && !selected && "hover:bg-neutral-hover",
          !disabled && selected && "bg-neutral-selected",
          // disabled 用 cursor-not-allowed(對齊 Button + Material/Polaris/Atlassian);
          // pointer-events-none 會讓 cursor 失效,改用 aria-disabled + onClick guard
          disabled && "text-fg-disabled cursor-not-allowed",
          className
        ),
        onClick: disabled ? void 0 : props.onClick,
        onKeyDown: disabled ? void 0 : props.onKeyDown,
        ...Object.fromEntries(Object.entries(props).filter(([k]) => k !== "onClick" && k !== "onKeyDown")),
        children: [
          hasPrefix && /* @__PURE__ */ jsxs("div", { className: cn(itemPrefixAlignVariants({ align: prefixAlign })), children: [
            checkbox && /* @__PURE__ */ jsx(
              Checkbox,
              {
                size: CHECKBOX_SIZE[sizeKey],
                checked: checked === true ? true : checked === "indeterminate" ? "indeterminate" : false,
                disabled,
                tabIndex: -1,
                className: "pointer-events-none"
              }
            ),
            StartIcon && /* @__PURE__ */ jsx(
              StartIcon,
              {
                "data-prefix-type": "icon",
                size: iconPx,
                className: cn("shrink-0", disabled && "text-fg-disabled"),
                "aria-hidden": true
              }
            ),
            avatar && /* @__PURE__ */ jsx(
              Avatar,
              {
                "data-prefix-type": "avatar",
                src: avatar.src,
                alt: avatar.alt,
                color: avatar.color,
                hoverCard: avatar.hoverCard,
                size: avatarPx
              }
            )
          ] }),
          /* @__PURE__ */ jsx(
            ItemContent,
            {
              label: children,
              description,
              mode: "scanning",
              size: sizeKey === "lg" ? "lg" : "md",
              descriptionTone: disabled ? "disabled" : "secondary",
              labelTruncate: false,
              labelClassName: cn(labelClampClass || "break-words", disabled && "text-fg-disabled"),
              descriptionClassName: cn(descClampClass || "break-words")
            }
          ),
          (tag || endContent) && // @row-slot-handcraft-allow: MenuItem 自身即 row primitive（item-anatomy Family 1 owner），此 tag/endContent 容器是 MenuItem 自有 suffix slot 實作，非外部 consumer hand-craft → 不再 wrap ItemSuffix
          /* @__PURE__ */ jsxs("div", { className: cn(
            "flex items-center gap-2 shrink-0 h-[1lh] ml-auto",
            disabled && "opacity-disabled"
          ), children: [
            tag,
            endContent
          ] })
        ]
      }
    );
  }
);
MenuItem.displayName = "MenuItem";
const MenuGroup = React.forwardRef(
  ({ children, className, ...props }, ref) => /* @__PURE__ */ jsx(
    "div",
    {
      ref,
      role: "group",
      className: cn("py-2 [&+&]:border-t [&+&]:border-divider", className),
      ...props,
      children
    }
  )
);
MenuGroup.displayName = "MenuGroup";
const MenuFooter = React.forwardRef(
  ({ children, className, ...props }, ref) => /* @__PURE__ */ jsx(
    "div",
    {
      ref,
      className: cn("py-2 border-t border-divider", className),
      ...props,
      children
    }
  )
);
MenuFooter.displayName = "MenuFooter";
const menuItemMeta = {
  component: "MenuItem",
  family: 1,
  variants: {},
  sizes: {
    sm: {},
    md: {},
    lg: {}
  },
  defaultSize: "md",
  states: ["default", "hover", "selected", "focus-visible", "disabled"],
  tokens: {
    bg: ["bg-neutral-hover", "bg-neutral-selected"],
    fg: ["text-fg-muted", "text-fg-disabled"]
  }
};
export {
  MenuFooter,
  MenuGroup,
  MenuItem,
  menuItemMeta,
  menuItemVariants
};
//# sourceMappingURL=menu-item.js.map
