"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.ListItemInfo = void 0;
var _reactNative = require("react-native");
var _reactNativeReanimated = _interopRequireDefault(require("react-native-reanimated"));
var _context = require("../../context");
var _core = require("../../core");
var _hooks = require("../../hooks");
var _accessibility = require("../../utils/accessibility");
var _badge = require("../badge");
var _buttons = require("../buttons");
var _LogoPaymentWithFallback = require("../common/LogoPaymentWithFallback");
var _icons = require("../icons");
var _layout = require("../layout");
var _typography = require("../typography");
var _jsxRuntime = require("react/jsx-runtime");
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
const PAYMENT_LOGO_SIZE = 24;
const EndElementComponent = ({
  type,
  componentProps
}) => {
  switch (type) {
    case "buttonLink":
      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_buttons.IOButton, {
        variant: "link",
        ...componentProps,
        accessibilityLabel: componentProps.accessibilityLabel ?? componentProps.label
      });
    case "iconButton":
      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_buttons.IconButton, {
        ...componentProps,
        accessibilityLabel: componentProps.accessibilityLabel
      });
    case "badge":
      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_badge.Badge, {
        ...componentProps
      });
    default:
      return null;
  }
};
const ListItemInfoContent = ({
  icon,
  paymentLogoIcon,
  label,
  value,
  numberOfLines,
  reversed,
  topElement,
  endElement,
  hasInteractiveElements,
  listItemAccessibilityLabel
}) => {
  const theme = (0, _context.useIOTheme)();
  const {
    hugeFontEnabled
  } = (0, _accessibility.useIOFontDynamicScale)();
  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
    children: [icon && !hugeFontEnabled && /*#__PURE__*/(0, _jsxRuntime.jsx)(_icons.Icon, {
      allowFontScaling: true,
      name: icon,
      color: theme["icon-decorative"],
      size: _core.IOListItemVisualParams.iconSize
    }), paymentLogoIcon && /*#__PURE__*/(0, _jsxRuntime.jsx)(_LogoPaymentWithFallback.LogoPaymentWithFallback, {
      brand: paymentLogoIcon,
      size: PAYMENT_LOGO_SIZE
    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
      style: {
        flex: 1
      },
      children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
        accessible: hasInteractiveElements,
        accessibilityLabel: hasInteractiveElements ? listItemAccessibilityLabel : undefined,
        importantForAccessibility: hasInteractiveElements ? "yes" : "no-hide-descendants",
        style: {
          flexDirection: reversed ? "column-reverse" : "column"
        },
        children: [topElement?.type === "badge" && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
          style: {
            alignSelf: "flex-start"
          },
          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_badge.Badge, {
            ...topElement.componentProps
          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_layout.VSpacer, {
            size: 4
          })]
        }), label && /*#__PURE__*/(0, _jsxRuntime.jsx)(_typography.BodySmall, {
          weight: "Regular",
          color: theme["textBody-tertiary"],
          children: label
        }), typeof value === "string" ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_typography.H6, {
          color: theme["textBody-default"],
          numberOfLines: numberOfLines,
          children: value
        }) : value]
      })
    }), endElement && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
      accessible: false,
      importantForAccessibility: hasInteractiveElements ? "auto" : "no-hide-descendants",
      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(EndElementComponent, {
        ...endElement
      })
    })]
  });
};

/**
 * ListItemInfo component displays information in a list item format with optional icons,
 * labels, values, and end elements (buttons, badges).
 *
 * @remarks
 * **Accessibility for Interactive Elements:**
 * When using interactive end elements (`buttonLink` or `iconButton`), you must provide
 * an appropriate `accessibilityLabel` directly to the interactive component props.
 * This ensures that screen reader users can understand the relationship between the
 * list item content and the action that the interactive element triggers.
 *
 * Example:
 * ```tsx
 * <ListItemInfo
 *   label="Email"
 *   value="user@example.com"
 *   endElement={{
 *     type: "buttonLink",
 *     componentProps: {
 *       label: "Edit",
 *       accessibilityLabel: "Edit email address"
 *     }
 *   }}
 * />
 * ```
 *
 * The design system cannot enforce this pattern automatically, so it's the responsibility
 * of the implementing software engineer to ensure proper accessibility labels are set.
 */
const ListItemInfo = ({
  value,
  label,
  numberOfLines = 2,
  reversed = false,
  icon,
  paymentLogoIcon,
  endElement,
  topElement,
  accessibilityLabel,
  accessibilityRole,
  accessibilityActions,
  onAccessibilityAction,
  onLongPress,
  testID
}) => {
  const {
    dynamicFontScale,
    spacingScaleMultiplier
  } = (0, _accessibility.useIOFontDynamicScale)();
  const {
    onPressIn,
    onPressOut,
    scaleAnimatedStyle,
    backgroundAnimatedStyle
  } = (0, _hooks.useListItemAnimation)();

  /**
   * A11Y Support: Two different combinations based on interactive elements
   *
   * 1. NO interactive elements (or just badge):
   *    - The outer container is accessible and receives the complete accessibility label
   *    - This allows the entire list item to be treated as a single accessibility element
   *
   * 2. WITH interactive elements (buttonLink or iconButton):
   *    - The outer container is NOT accessible
   *    - The inner content becomes accessible with its label
   *    - The interactive element is separately accessible with its own label
   *    - This allows screen readers to navigate between the content and the action separately
   */
  const hasInteractiveElements = endElement?.type === "buttonLink" || endElement?.type === "iconButton";
  const componentValueToAccessibility = typeof value === "string" ? value : "";
  const topBadgeText = topElement?.type === "badge" ? topElement.componentProps.text ?? "" : "";
  const endBadgeText = endElement?.type === "badge" ? endElement.componentProps.text ?? "" : "";

  /**
   * Build text in VISUAL ORDER
   */
  const mainTextParts = reversed ? [componentValueToAccessibility, label] : [label, componentValueToAccessibility];
  const textParts = [topBadgeText, ...mainTextParts, endBadgeText];
  const listItemAccessibilityLabel = accessibilityLabel ?? textParts.filter(Boolean).join("; ");
  const contentProps = {
    icon,
    paymentLogoIcon,
    label,
    value,
    numberOfLines,
    reversed,
    topElement,
    endElement,
    hasInteractiveElements,
    listItemAccessibilityLabel
  };
  if (onLongPress) {
    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Pressable, {
      onLongPress: onLongPress,
      testID: testID,
      accessible: true,
      accessibilityRole: "button",
      accessibilityLabel: listItemAccessibilityLabel,
      accessibilityActions: accessibilityActions,
      onAccessibilityAction: onAccessibilityAction,
      onPressIn: onPressIn,
      onPressOut: onPressOut,
      onTouchEnd: onPressOut,
      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNativeReanimated.default.View, {
        style: [_core.IOListItemStyles.listItem, backgroundAnimatedStyle],
        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNativeReanimated.default.View, {
          style: [_core.IOListItemStyles.listItemInner, {
            columnGap: _core.IOListItemVisualParams.iconMargin * dynamicFontScale * spacingScaleMultiplier
          }, scaleAnimatedStyle],
          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(ListItemInfoContent, {
            ...contentProps
          })
        })
      })
    });
  }
  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
    style: _core.IOListItemStyles.listItem,
    testID: testID,
    accessible: !hasInteractiveElements,
    accessibilityLabel: hasInteractiveElements ? undefined : listItemAccessibilityLabel,
    accessibilityRole: hasInteractiveElements ? undefined : accessibilityRole,
    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
      style: [_core.IOListItemStyles.listItemInner, {
        columnGap: _core.IOListItemVisualParams.iconMargin * dynamicFontScale * spacingScaleMultiplier
      }],
      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(ListItemInfoContent, {
        ...contentProps
      })
    })
  });
};
exports.ListItemInfo = ListItemInfo;
//# sourceMappingURL=ListItemInfo.js.map