"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.ListItemTransaction = void 0;
var _react = require("react");
var _reactNative = require("react-native");
var _context = require("../../context");
var _core = require("../../core");
var _url = require("../../utils/url");
var _Avatar = require("../avatar/Avatar");
var _Badge = require("../badge/Badge");
var _LogoPaymentWithFallback = require("../common/LogoPaymentWithFallback");
var _icons = require("../icons");
var _layout = require("../layout");
var _skeleton = require("../skeleton");
var _typography = require("../typography");
var _PressableListItemBase = require("./PressableListItemBase");
var _jsxRuntime = require("react/jsx-runtime");
const CARD_LOGO_SIZE = 24;
const MUNICIPALITY_LOGO_SIZE = 44;
// this is the <Avatar/>'s "small" size,
// since it is bigger than the card logos, we use
// it as a base size for homogeneous sizing via container size.

const ListItemTransactionContent = ({
  paymentLogoIcon,
  numberOfLines,
  title,
  subtitle,
  badge,
  amountAccessibilityLabel,
  showChevron,
  amount,
  refund
}) => {
  const theme = (0, _context.useIOTheme)();
  const interactiveColor = theme["interactiveElem-default"];
  const amountColor = refund ? theme.successText : theme["textBody-default"];
  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_layout.HStack, {
      allowScaleSpacing: true,
      space: _core.IOListItemLogoMargin,
      style: {
        alignItems: "center",
        flexShrink: 1
      },
      children: [paymentLogoIcon && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
        style: {
          width: MUNICIPALITY_LOGO_SIZE,
          alignItems: "center"
        },
        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(StartComponent, {
          logoIcon: paymentLogoIcon
        })
      }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
        style: {
          flexShrink: 1
        },
        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_typography.H6, {
          numberOfLines: numberOfLines,
          color: theme["textBody-default"],
          children: title
        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_typography.BodySmall, {
          weight: "Regular",
          color: theme["textBody-tertiary"],
          children: subtitle
        })]
      })]
    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_layout.HStack, {
      space: 4,
      style: {
        alignItems: "center"
      },
      children: [badge ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_Badge.Badge, {
        variant: badge?.variant,
        text: badge?.text
      }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_typography.H6, {
        accessibilityLabel: amountAccessibilityLabel,
        color: showChevron ? interactiveColor : amountColor,
        numberOfLines: numberOfLines,
        children: amount
      }), showChevron && /*#__PURE__*/(0, _jsxRuntime.jsx)(_icons.Icon, {
        allowFontScaling: true,
        name: "chevronRightListItem",
        color: interactiveColor,
        size: _core.IOListItemVisualParams.chevronSize
      })]
    })]
  });
};
const StartComponent = ({
  logoIcon
}) => {
  if ((0, _url.isImageUri)(logoIcon)) {
    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Avatar.Avatar, {
      logoUri: logoIcon,
      size: "small"
    });
  }
  if (/*#__PURE__*/(0, _react.isValidElement)(logoIcon)) {
    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
      children: logoIcon
    });
  }
  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_LogoPaymentWithFallback.LogoPaymentWithFallback, {
    brand: logoIcon,
    size: CARD_LOGO_SIZE
  });
};
const ListItemTransaction = ({
  accessibilityLabel,
  loadingAccessibilityLabel,
  showChevron = false,
  isLoading = false,
  paymentLogoIcon,
  onPress,
  subtitle,
  testID,
  title,
  transaction: {
    amount,
    amountAccessibilityLabel,
    badge,
    refund
  },
  numberOfLines = 2,
  accessible
}) => {
  if (isLoading) {
    return /*#__PURE__*/(0, _jsxRuntime.jsx)(ListItemTransactionSkeleton, {
      loadingAccessibilityLabel: loadingAccessibilityLabel
    });
  }
  const contentProps = {
    paymentLogoIcon,
    numberOfLines,
    title,
    subtitle,
    badge,
    amountAccessibilityLabel,
    showChevron,
    amount,
    refund
  };
  if (onPress) {
    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_PressableListItemBase.PressableListItemBase, {
      onPress: onPress,
      testID: testID,
      accessibilityLabel: accessibilityLabel,
      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(ListItemTransactionContent, {
        ...contentProps
      })
    });
  } else {
    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
      style: _core.IOListItemStyles.listItem,
      testID: testID,
      accessible: accessible,
      accessibilityLabel: accessibilityLabel,
      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
        style: [_core.IOListItemStyles.listItemInner, {
          columnGap: _core.IOListItemVisualParams.iconMargin
        }],
        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(ListItemTransactionContent, {
          ...contentProps
        })
      })
    });
  }
};
exports.ListItemTransaction = ListItemTransaction;
const ListItemTransactionSkeleton = ({
  loadingAccessibilityLabel
}) => /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
  style: _core.IOListItemStyles.listItem,
  accessible: true,
  accessibilityLabel: loadingAccessibilityLabel,
  accessibilityState: {
    busy: true
  },
  children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
    style: _core.IOListItemStyles.listItemInner,
    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
      style: {
        marginRight: _core.IOListItemVisualParams.iconMargin
      },
      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_skeleton.IOSkeleton, {
        shape: "square",
        size: _core.IOVisualCostants.avatarSizeSmall,
        radius: _core.IOVisualCostants.avatarRadiusSizeSmall
      })
    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_layout.VStack, {
      space: 4,
      style: {
        flexGrow: 1
      },
      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_skeleton.IOSkeleton, {
        shape: "rectangle",
        width: 62,
        height: 16,
        radius: 8
      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_skeleton.IOSkeleton, {
        shape: "rectangle",
        width: 107,
        height: 16,
        radius: 8
      })]
    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
      style: {
        marginLeft: _core.IOListItemVisualParams.iconMargin
      },
      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_skeleton.IOSkeleton, {
        shape: "rectangle",
        width: 70,
        height: 24,
        radius: 8
      })
    })]
  })
});
//# sourceMappingURL=ListItemTransaction.js.map