import { jsx } from 'react/jsx-runtime';
import React__default, { useCallback } from 'react';
import { CheckIcon } from '@heroicons/react/16/solid';
import { cn } from '../../../utils/cn.js';
import { useDropdownContext } from './DropdownContext.js';
import { MenuItem } from '../MenuItem/MenuItem.js';

/**
 * DropdownItem component - individual menu item for action menus.
 * Built on shared MenuItem, adds selection mode and Dropdown context integration.
 */
const DropdownItem = React__default.forwardRef(({ itemKey, children, className, startContent, endContent, subtitle, shortcut, isDisabled = false, isDanger = false, onAction, ...props }, ref) => {
    const { closeOnSelect, onOpenChange, disabledKeys, selectedKeys, selectionMode, onAction: contextOnAction, onSelectionChange, theme, } = useDropdownContext();
    // Check if item is disabled
    const disabled = isDisabled || disabledKeys.has(itemKey);
    // Check if item is selected
    const isSelected = selectedKeys.has(itemKey);
    // Handle item click/activation
    const handleActivate = useCallback(() => {
        if (disabled)
            return;
        // Handle selection if selection mode is enabled
        if (selectionMode !== "none" && onSelectionChange) {
            const newSelectedKeys = new Set(selectedKeys);
            if (selectionMode === "single") {
                newSelectedKeys.clear();
                newSelectedKeys.add(itemKey);
            }
            else if (selectionMode === "multiple") {
                if (newSelectedKeys.has(itemKey)) {
                    newSelectedKeys.delete(itemKey);
                }
                else {
                    newSelectedKeys.add(itemKey);
                }
            }
            onSelectionChange(newSelectedKeys);
        }
        // Call action handlers
        onAction === null || onAction === void 0 ? void 0 : onAction();
        contextOnAction === null || contextOnAction === void 0 ? void 0 : contextOnAction(itemKey);
        // Close menu if configured (and not in multiple selection mode)
        if (closeOnSelect && selectionMode !== "multiple") {
            onOpenChange(false);
        }
    }, [
        disabled,
        itemKey,
        selectedKeys,
        selectionMode,
        onAction,
        contextOnAction,
        onSelectionChange,
        closeOnSelect,
        onOpenChange,
    ]);
    // Determine the appropriate ARIA role based on selection mode
    const itemRole = selectionMode === "single"
        ? "menuitemradio"
        : selectionMode === "multiple"
            ? "menuitemcheckbox"
            : "menuitem";
    // Build end content: user's endContent OR selection checkmark
    const resolvedEndContent = endContent ||
        (selectionMode !== "none" ? (jsx("div", { className: cn("flex items-center justify-center flex-shrink-0 w-5 h-5"), children: isSelected && (jsx(CheckIcon, { className: "size-4 text-[var(--color-text-secondary)]" })) })) : undefined);
    return (jsx(MenuItem, { ref: ref, role: itemRole, disabled: disabled, isDanger: isDanger, startContent: startContent, endContent: resolvedEndContent, subtitle: subtitle, shortcut: shortcut, onActivate: handleActivate, "data-selected": isSelected, ...(selectionMode !== "none" ? { "aria-checked": isSelected } : {}), className: className, theme: {
            baseStyle: theme.itemBaseStyle,
            dangerStyle: theme.itemDangerStyle,
            focusStyle: theme.itemFocusStyle,
        }, ...props, children: children }));
});
DropdownItem.displayName = "Dropdown.Item";

export { DropdownItem };
