// Copyright (c) Meta Platforms, Inc. and affiliates.

'use client';

/**
 * @file MenuBottomSheetActionList.tsx
 * @input Uses menu data entries and callbacks for selection and drill-in
 * @output Internal touch-friendly action list shared by DropdownMenu and ContextMenu
 * @position Shared implementation for menu bottom-sheet presentations
 */
import type { ReactElement } from 'react';
import * as stylex from "../style-runtime.js";
import { Divider } from "../Divider/index.js";
import { Heading } from "../Heading/index.js";
import { Icon, renderIconSlot } from "../Icon/index.js";
import { List, ListItem } from "../List/index.js";
import "../theme/tokens.stylex.js";
import { colorVars, spacingVars } from "../theme/tokens.stylex.js";
import { rtlStyles } from "../utils/index.js";
import { getInteractionModality } from "../utils/interactionModality.js";
import type { DropdownMenuItemData, DropdownMenuOption } from "./DropdownMenu.js";
const styles = {
  destructiveAction: {
    "--_item-label-color": "xufyqxy",
    "--_item-description-color": "xqlix59",
    kMwMTN: "xjt36v0",
    $$css: true as const
  },
  divider: {
    kqGvvJ: "xsq74q5",
    $$css: true as const
  }
};
function getItemKey(item: DropdownMenuItemData, index: number): string {
  return `item-${item.id ?? index}`;
}
export function MenuBottomSheetActionList({
  items,
  onSelect,
  onOpenSubmenu
}: {
  items: DropdownMenuOption[];
  onSelect: (item: DropdownMenuItemData) => void;
  onOpenSubmenu: (item: DropdownMenuItemData) => void;
}) {
  const renderItem = (item: DropdownMenuItemData, index: number): ReactElement => {
    const isSubmenu = item.items != null && item.items.length > 0;
    const isDestructive = item.variant === 'destructive';
    return <ListItem key={getItemKey(item, index)} label={item.label} description={item.description} startContent={item.icon ? renderIconSlot(item.icon, {
      size: 'sm',
      color: isDestructive ? 'error' : 'secondary'
    }) : undefined} endContent={isSubmenu ? <Icon icon="chevronRight" size="sm" color="secondary" xstyle={rtlStyles.mirror} /> : item.endContent} isDisabled={item.isDisabled} onClick={event => {
      if (getInteractionModality() === 'pointer') {
        (event.currentTarget as HTMLElement).blur();
      }
      if (isSubmenu) {
        onOpenSubmenu(item);
      } else {
        onSelect(item);
      }
    }} xstyle={isDestructive && styles.destructiveAction} />;
  };
  return <List density="spacious">
      {items.map((option, index) => {
      if ('type' in option && option.type === 'divider') {
        return <li
        // eslint-disable-next-line @eslint-react/no-array-index-key
        key={`divider-${index}`} role="presentation" className="x3ct3a4">
              <Divider xstyle={styles.divider} />
            </li>;
      }
      if ('type' in option && option.type === 'section') {
        return <li key={`section-${option.id ?? index}`} role="presentation" className="x3ct3a4">
              <div role="group" aria-label={option.title} className="x78zum5 xdt5ytf xzye2dw">
                {option.title && <Heading level={4}>{option.title}</Heading>}
                <List density="spacious">{option.items.map(renderItem)}</List>
              </div>
            </li>;
      }
      return renderItem(option, index);
    })}
    </List>;
}
MenuBottomSheetActionList.displayName = 'MenuBottomSheetActionList';