"use strict";

import { isValidElement } from "react";
import { View } from "react-native";
import { useIOTheme } from "../../context";
import { IOListItemLogoMargin, IOListItemStyles, IOListItemVisualParams, IOVisualCostants } from "../../core";
import { isImageUri } from "../../utils/url";
import { Avatar } from "../avatar/Avatar";
import { Badge } from "../badge/Badge";
import { LogoPaymentWithFallback } from "../common/LogoPaymentWithFallback";
import { Icon } from "../icons";
import { HStack, VStack } from "../layout";
import { IOSkeleton } from "../skeleton";
import { BodySmall, H6 } from "../typography";
import { PressableListItemBase } from "./PressableListItemBase";
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "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 = useIOTheme();
  const interactiveColor = theme["interactiveElem-default"];
  const amountColor = refund ? theme.successText : theme["textBody-default"];
  return /*#__PURE__*/_jsxs(_Fragment, {
    children: [/*#__PURE__*/_jsxs(HStack, {
      allowScaleSpacing: true,
      space: IOListItemLogoMargin,
      style: {
        alignItems: "center",
        flexShrink: 1
      },
      children: [paymentLogoIcon && /*#__PURE__*/_jsx(View, {
        style: {
          width: MUNICIPALITY_LOGO_SIZE,
          alignItems: "center"
        },
        children: /*#__PURE__*/_jsx(StartComponent, {
          logoIcon: paymentLogoIcon
        })
      }), /*#__PURE__*/_jsxs(View, {
        style: {
          flexShrink: 1
        },
        children: [/*#__PURE__*/_jsx(H6, {
          numberOfLines: numberOfLines,
          color: theme["textBody-default"],
          children: title
        }), /*#__PURE__*/_jsx(BodySmall, {
          weight: "Regular",
          color: theme["textBody-tertiary"],
          children: subtitle
        })]
      })]
    }), /*#__PURE__*/_jsxs(HStack, {
      space: 4,
      style: {
        alignItems: "center"
      },
      children: [badge ? /*#__PURE__*/_jsx(Badge, {
        variant: badge?.variant,
        text: badge?.text
      }) : /*#__PURE__*/_jsx(H6, {
        accessibilityLabel: amountAccessibilityLabel,
        color: showChevron ? interactiveColor : amountColor,
        numberOfLines: numberOfLines,
        children: amount
      }), showChevron && /*#__PURE__*/_jsx(Icon, {
        allowFontScaling: true,
        name: "chevronRightListItem",
        color: interactiveColor,
        size: IOListItemVisualParams.chevronSize
      })]
    })]
  });
};
const StartComponent = ({
  logoIcon
}) => {
  if (isImageUri(logoIcon)) {
    return /*#__PURE__*/_jsx(Avatar, {
      logoUri: logoIcon,
      size: "small"
    });
  }
  if (/*#__PURE__*/isValidElement(logoIcon)) {
    return /*#__PURE__*/_jsx(_Fragment, {
      children: logoIcon
    });
  }
  return /*#__PURE__*/_jsx(LogoPaymentWithFallback, {
    brand: logoIcon,
    size: CARD_LOGO_SIZE
  });
};
export 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__*/_jsx(ListItemTransactionSkeleton, {
      loadingAccessibilityLabel: loadingAccessibilityLabel
    });
  }
  const contentProps = {
    paymentLogoIcon,
    numberOfLines,
    title,
    subtitle,
    badge,
    amountAccessibilityLabel,
    showChevron,
    amount,
    refund
  };
  if (onPress) {
    return /*#__PURE__*/_jsx(PressableListItemBase, {
      onPress: onPress,
      testID: testID,
      accessibilityLabel: accessibilityLabel,
      children: /*#__PURE__*/_jsx(ListItemTransactionContent, {
        ...contentProps
      })
    });
  } else {
    return /*#__PURE__*/_jsx(View, {
      style: IOListItemStyles.listItem,
      testID: testID,
      accessible: accessible,
      accessibilityLabel: accessibilityLabel,
      children: /*#__PURE__*/_jsx(View, {
        style: [IOListItemStyles.listItemInner, {
          columnGap: IOListItemVisualParams.iconMargin
        }],
        children: /*#__PURE__*/_jsx(ListItemTransactionContent, {
          ...contentProps
        })
      })
    });
  }
};
const ListItemTransactionSkeleton = ({
  loadingAccessibilityLabel
}) => /*#__PURE__*/_jsx(View, {
  style: IOListItemStyles.listItem,
  accessible: true,
  accessibilityLabel: loadingAccessibilityLabel,
  accessibilityState: {
    busy: true
  },
  children: /*#__PURE__*/_jsxs(View, {
    style: IOListItemStyles.listItemInner,
    children: [/*#__PURE__*/_jsx(View, {
      style: {
        marginRight: IOListItemVisualParams.iconMargin
      },
      children: /*#__PURE__*/_jsx(IOSkeleton, {
        shape: "square",
        size: IOVisualCostants.avatarSizeSmall,
        radius: IOVisualCostants.avatarRadiusSizeSmall
      })
    }), /*#__PURE__*/_jsxs(VStack, {
      space: 4,
      style: {
        flexGrow: 1
      },
      children: [/*#__PURE__*/_jsx(IOSkeleton, {
        shape: "rectangle",
        width: 62,
        height: 16,
        radius: 8
      }), /*#__PURE__*/_jsx(IOSkeleton, {
        shape: "rectangle",
        width: 107,
        height: 16,
        radius: 8
      })]
    }), /*#__PURE__*/_jsx(View, {
      style: {
        marginLeft: IOListItemVisualParams.iconMargin
      },
      children: /*#__PURE__*/_jsx(IOSkeleton, {
        shape: "rectangle",
        width: 70,
        height: 24,
        radius: 8
      })
    })]
  })
});
//# sourceMappingURL=ListItemTransaction.js.map