"use strict";

import { Pressable, View } from "react-native";
import Animated from "react-native-reanimated";
import { useIOTheme } from "../../context";
import { IOListItemStyles, IOListItemVisualParams } from "../../core";
import { useListItemAnimation } from "../../hooks";
import { useIOFontDynamicScale } from "../../utils/accessibility";
import { Badge } from "../badge";
import { IOButton, IconButton } from "../buttons";
import { LogoPaymentWithFallback } from "../common/LogoPaymentWithFallback";
import { Icon } from "../icons";
import { VSpacer } from "../layout";
import { BodySmall, H6 } from "../typography";
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
const PAYMENT_LOGO_SIZE = 24;
const EndElementComponent = ({
  type,
  componentProps
}) => {
  switch (type) {
    case "buttonLink":
      return /*#__PURE__*/_jsx(IOButton, {
        variant: "link",
        ...componentProps,
        accessibilityLabel: componentProps.accessibilityLabel ?? componentProps.label
      });
    case "iconButton":
      return /*#__PURE__*/_jsx(IconButton, {
        ...componentProps,
        accessibilityLabel: componentProps.accessibilityLabel
      });
    case "badge":
      return /*#__PURE__*/_jsx(Badge, {
        ...componentProps
      });
    default:
      return null;
  }
};
const ListItemInfoContent = ({
  icon,
  paymentLogoIcon,
  label,
  value,
  numberOfLines,
  reversed,
  topElement,
  endElement,
  hasInteractiveElements,
  listItemAccessibilityLabel
}) => {
  const theme = useIOTheme();
  const {
    hugeFontEnabled
  } = useIOFontDynamicScale();
  return /*#__PURE__*/_jsxs(_Fragment, {
    children: [icon && !hugeFontEnabled && /*#__PURE__*/_jsx(Icon, {
      allowFontScaling: true,
      name: icon,
      color: theme["icon-decorative"],
      size: IOListItemVisualParams.iconSize
    }), paymentLogoIcon && /*#__PURE__*/_jsx(LogoPaymentWithFallback, {
      brand: paymentLogoIcon,
      size: PAYMENT_LOGO_SIZE
    }), /*#__PURE__*/_jsx(View, {
      style: {
        flex: 1
      },
      children: /*#__PURE__*/_jsxs(View, {
        accessible: hasInteractiveElements,
        accessibilityLabel: hasInteractiveElements ? listItemAccessibilityLabel : undefined,
        importantForAccessibility: hasInteractiveElements ? "yes" : "no-hide-descendants",
        style: {
          flexDirection: reversed ? "column-reverse" : "column"
        },
        children: [topElement?.type === "badge" && /*#__PURE__*/_jsxs(View, {
          style: {
            alignSelf: "flex-start"
          },
          children: [/*#__PURE__*/_jsx(Badge, {
            ...topElement.componentProps
          }), /*#__PURE__*/_jsx(VSpacer, {
            size: 4
          })]
        }), label && /*#__PURE__*/_jsx(BodySmall, {
          weight: "Regular",
          color: theme["textBody-tertiary"],
          children: label
        }), typeof value === "string" ? /*#__PURE__*/_jsx(H6, {
          color: theme["textBody-default"],
          numberOfLines: numberOfLines,
          children: value
        }) : value]
      })
    }), endElement && /*#__PURE__*/_jsx(View, {
      accessible: false,
      importantForAccessibility: hasInteractiveElements ? "auto" : "no-hide-descendants",
      children: /*#__PURE__*/_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.
 */
export const ListItemInfo = ({
  value,
  label,
  numberOfLines = 2,
  reversed = false,
  icon,
  paymentLogoIcon,
  endElement,
  topElement,
  accessibilityLabel,
  accessibilityRole,
  accessibilityActions,
  onAccessibilityAction,
  onLongPress,
  testID
}) => {
  const {
    dynamicFontScale,
    spacingScaleMultiplier
  } = useIOFontDynamicScale();
  const {
    onPressIn,
    onPressOut,
    scaleAnimatedStyle,
    backgroundAnimatedStyle
  } = 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__*/_jsx(Pressable, {
      onLongPress: onLongPress,
      testID: testID,
      accessible: true,
      accessibilityRole: "button",
      accessibilityLabel: listItemAccessibilityLabel,
      accessibilityActions: accessibilityActions,
      onAccessibilityAction: onAccessibilityAction,
      onPressIn: onPressIn,
      onPressOut: onPressOut,
      onTouchEnd: onPressOut,
      children: /*#__PURE__*/_jsx(Animated.View, {
        style: [IOListItemStyles.listItem, backgroundAnimatedStyle],
        children: /*#__PURE__*/_jsx(Animated.View, {
          style: [IOListItemStyles.listItemInner, {
            columnGap: IOListItemVisualParams.iconMargin * dynamicFontScale * spacingScaleMultiplier
          }, scaleAnimatedStyle],
          children: /*#__PURE__*/_jsx(ListItemInfoContent, {
            ...contentProps
          })
        })
      })
    });
  }
  return /*#__PURE__*/_jsx(View, {
    style: IOListItemStyles.listItem,
    testID: testID,
    accessible: !hasInteractiveElements,
    accessibilityLabel: hasInteractiveElements ? undefined : listItemAccessibilityLabel,
    accessibilityRole: hasInteractiveElements ? undefined : accessibilityRole,
    children: /*#__PURE__*/_jsx(View, {
      style: [IOListItemStyles.listItemInner, {
        columnGap: IOListItemVisualParams.iconMargin * dynamicFontScale * spacingScaleMultiplier
      }],
      children: /*#__PURE__*/_jsx(ListItemInfoContent, {
        ...contentProps
      })
    })
  });
};
//# sourceMappingURL=ListItemInfo.js.map