"use strict";

import React, { useCallback, useMemo } from "react";
import { Platform, Pressable, View } from "react-native";
import Animated from "react-native-reanimated";
import { IOListItemStyles, IOListItemVisualParams } from "../../core";
import { useIOTheme } from "../../context";
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 { BodySmall, H6 } from "../typography";
import { VSpacer } from "../layout";
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
const PAYMENT_LOGO_SIZE = 24;
export const ListItemInfo = ({
  value,
  label,
  numberOfLines = 2,
  reversed = false,
  icon,
  paymentLogoIcon,
  endElement,
  topElement,
  accessibilityLabel,
  accessibilityRole,
  accessibilityActions,
  onAccessibilityAction,
  onLongPress,
  testID
}) => {
  const theme = useIOTheme();
  const {
    dynamicFontScale,
    spacingScaleMultiplier,
    hugeFontEnabled
  } = useIOFontDynamicScale();
  const {
    onPressIn,
    onPressOut,
    scaleAnimatedStyle,
    backgroundAnimatedStyle
  } = useListItemAnimation();
  const componentValueToAccessibility = useMemo(() => typeof value === "string" ? value : "", [value]);
  const listItemAccessibilityLabel = useMemo(() => accessibilityLabel ?? (label ? `${label}; ${componentValueToAccessibility}` : componentValueToAccessibility), [label, componentValueToAccessibility, accessibilityLabel]);
  const itemInfoTextComponent = useMemo(() => /*#__PURE__*/_jsxs(View, {
    accessible: Platform.OS === "ios",
    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]
  }), [label, value, numberOfLines, theme, reversed, topElement]);
  const listItemInfoAction = useCallback(() => {
    if (endElement) {
      const {
        type,
        componentProps
      } = endElement;
      switch (type) {
        case "buttonLink":
          const buttonLinkAccessibilityLabel = `${componentProps.accessibilityLabel ?? componentProps.label}`;
          return /*#__PURE__*/_jsx(IOButton, {
            variant: "link",
            ...componentProps,
            accessibilityLabel: buttonLinkAccessibilityLabel
          });
        case "iconButton":
          const iconButtonAccessibilityLabel = `${componentProps.accessibilityLabel}`;
          return /*#__PURE__*/_jsx(IconButton, {
            ...componentProps,
            accessibilityLabel: iconButtonAccessibilityLabel
          });
        case "badge":
          return /*#__PURE__*/_jsx(Badge, {
            ...componentProps
          });
        default:
          return /*#__PURE__*/_jsx(_Fragment, {});
      }
    }
    return /*#__PURE__*/_jsx(_Fragment, {});
  }, [endElement]);
  const ListItemInfoContent = () => /*#__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: itemInfoTextComponent
    }), endElement && /*#__PURE__*/_jsx(View, {
      children: listItemInfoAction()
    })]
  });
  if (onLongPress) {
    return /*#__PURE__*/_jsx(Pressable, {
      onLongPress: onLongPress,
      testID: testID,
      accessible: !endElement,
      onPressIn: onPressIn,
      onPressOut: onPressOut,
      onTouchEnd: onPressOut,
      accessibilityRole: "button",
      accessibilityLabel: listItemAccessibilityLabel,
      accessibilityActions: accessibilityActions,
      onAccessibilityAction: onAccessibilityAction,
      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, {})
        })
      })
    });
  } else {
    return /*#__PURE__*/_jsx(View, {
      style: IOListItemStyles.listItem,
      testID: testID,
      accessible: !endElement,
      accessibilityLabel: listItemAccessibilityLabel,
      accessibilityRole: accessibilityRole,
      children: /*#__PURE__*/_jsx(View, {
        style: [IOListItemStyles.listItemInner, {
          columnGap: IOListItemVisualParams.iconMargin * dynamicFontScale * spacingScaleMultiplier
        }],
        children: /*#__PURE__*/_jsx(ListItemInfoContent, {})
      })
    });
  }
};
export default ListItemInfo;
//# sourceMappingURL=ListItemInfo.js.map