// Metro module 9805 (f9806).
import { View } from "react-native";
import { createStyles } from "../../../design/components/Styles/native/createStyles";
import { SMALL_BUTTON_HEIGHT } from "../../../design/components/Button/native/ButtonConstants.native";
import Module712 from "../../../_bundle/Module712";
import { isAndroid } from "../../../utils/PlatformUtils";
import { useVirtualCurrencyBalanceAnimationData } from "../hooks/native/useVirtualCurrencyBalanceAnimationData";
import { intl, t } from "../../../intl/index.native";
import { OrbLottieAnimation } from "./OrbLottieAnimation";
import { BalanceCounter } from "./BalanceCounter";
import { EXPECTED_ORB_LOTTIE_ANIMATION_DURATION_MS } from "../shared/AnimationUtils";
let useStyles;
const lineHeight = isAndroid() ? 14 : void 0;
export function BalanceWidgetPill(props) {
  let initialRenderedBalance = props.initialRenderedBalance;
  if (initialRenderedBalance === void 0) {
    initialRenderedBalance = null;
  }
  let balance = props.balance;
  const busy = initialRenderedBalance === null && balance === null;
  const virtualCurrencyBalanceAnimationData = useVirtualCurrencyBalanceAnimationData({
    initialRenderedBalance,
    balance
  });
  const { onValueChange, onValueReached, showInitialRenderedBalance, currentAnimationType, lottieRef } = virtualCurrencyBalanceAnimationData;
  const styles = useStyles();
  const accessibilityLabel = busy ? intl.string(t.y0WGqP) : intl.formatToPlainString(t.zPaLL9, {
    balance
  });
  const r50 = [<View style={styles.orbsLottieContainer}>
    <OrbLottieAnimation ref={lottieRef} animationType={currentAnimationType} />
  </View>, ,];
  if (showInitialRenderedBalance) {
    balance = initialRenderedBalance;
  }
  r50[1] = <View style={styles.balanceCounterContainer}>
    <BalanceCounter value={balance} onValueChange={onValueChange} onValueReached={onValueReached} targetTotalCounterTime={EXPECTED_ORB_LOTTIE_ANIMATION_DURATION_MS} style={styles.balanceText} />
  </View>;
  return <View style={styles.container} accessibilityLabel={accessibilityLabel} accessibilityState={{
    busy
  }} accessible>{r50}</View>;
}
useStyles = createStyles({
  container: {
    minHeight: SMALL_BUTTON_HEIGHT,
    borderRadius: Module712.radii.round,
    justifyContent: "center",
    alignItems: "center",
    flexDirection: "row",
    paddingHorizontal: Module712.space.PX_12,
    paddingVertical: Module712.space.PX_4,
    backgroundColor: Module712.colors.CONTROL_OVERLAY_SECONDARY_BACKGROUND_DEFAULT,
    gap: 4
  },
  orbsLottieContainer: {
    position: "relative",
    height: 18,
    width: 18,
    justifyContent: "center",
    alignItems: "center"
  },
  balanceCounterContainer: {
    justifyContent: "center",
    alignItems: "flex-end"
  },
  balanceText: {
    color: Module712.colors.CONTROL_OVERLAY_SECONDARY_TEXT_DEFAULT,
    textAlign: "right",
    lineHeight
  }
});
BalanceWidgetPill.displayName = "BalanceWidgetPill";
export default BalanceWidgetPill;