// Metro module 11904 (f11905).
import { useMemo } from "react";
import { ActivityIndicator, View } from "react-native";
import { createStyles } from "../../../../design/components/Styles/native/createStyles";
import Module712 from "../../../../_bundle/Module712";
import { Stack } from "../../../../design/components/Stack/native/Stack.native";
import { CircleErrorIcon } from "../../../../design/components/Icon/native/redesign/generated/CircleErrorIcon";
import { Text } from "../../../../design/components/Text/native/Text";
import CollectiblesShopCheckoutDetails from "../../../collectibles/native/CollectiblesShopCheckoutDetails";
import { intl, t } from "../../../../intl/index.native";
import OrbCheckoutAmountTag from "../../native/OrbCheckoutAmountTag";
import { useOrbCheckoutModalContext } from "../OrbCheckoutModalContext";
import { getOrbCheckoutDisclaimerMessage } from "../OrbCheckoutUtils";
import useTheme from "../../../../hooks/useTheme";
import { useVirtualCurrencyBalance } from "../../hooks/useVirtualCurrencyBalance";
import { Button } from "../../../../design/components/Button/native/Button.native";
import { isThemeDark } from "../../../../design/shared";
import { OrbsIcon } from "../../../../design/components/Icon/native/redesign/generated/OrbsIcon";
const useStyles = createStyles({
  topRowWrapper: {
    width: "100%",
    marginBottom: 10
  },
  rowWrapper: {
    width: "100%",
    marginVertical: 10
  },
  rowDetailsContainer: {
    borderRadius: Module712.radii.lg,
    backgroundColor: Module712.colors.BACKGROUND_MOD_SUBTLE,
    padding: Module712.space.PX_16
  },
  orbPaymentSourceDetails: {
    flexDirection: "row",
    justifyContent: "space-between",
    alignItems: "center"
  },
  sectionTitle: {
    marginBottom: Module712.space.PX_8
  },
  spinner: {
    paddingVertical: Module712.space.PX_16,
    alignItems: "center"
  },
  disclaimer: {
    opacity: 0.5
  },
  errorCard: {
    borderRadius: Module712.radii.sm,
    padding: Module712.space.PX_12,
    backgroundColor: Module712.colors.BACKGROUND_FEEDBACK_CRITICAL
  }
});
export function OrbCheckoutErrorCard(props) {
  const error = props.error;
  return <View style={useStyles().errorCard}>
    <Stack direction="horizontal" spacing={8} align="flex-start">
      <CircleErrorIcon size="sm" color="mobile-text-heading-primary" />
      <Text variant="text-sm/medium" color="mobile-text-heading-primary">{error}</Text>
    </Stack>
  </View>;
}
export function OrbCheckoutOrderSummary(props) {
  const product = props.product;
  const styles = useStyles();
  const r18 = product == null ? <View style={[styles.rowDetailsContainer, styles.spinner]}>
    <ActivityIndicator size="small" />
  </View> : <CollectiblesShopCheckoutDetails product={product} useOrbPrice />;
  return <View style={styles.topRowWrapper}>
    <Text variant="heading-sm/bold" color="mobile-text-heading-primary" style={styles.sectionTitle}>
      {intl.string(t.hws7bC)}
    </Text>
    {r18}
  </View>;
}
export function OrbCheckoutPaymentSourceDetails(props) {
  const orbBalance = props.orbBalance;
  const styles = useStyles();
  return <View style={styles.rowWrapper}>
    <Text variant="heading-sm/bold" color="mobile-text-heading-primary" style={styles.sectionTitle}>
      {intl.string(t["zLch/S"])}
    </Text>
    <View style={[styles.rowDetailsContainer, styles.orbPaymentSourceDetails]}>
      <Text variant="text-md/medium" color="mobile-text-heading-primary">
        {intl.string(t.y0WGqP)}
      </Text>
      <OrbCheckoutAmountTag orbAmount={orbBalance} />
    </View>
  </View>;
}
export function OrbCheckoutLegalFinePrint() {
  const styles = useStyles();
  const skuId = useOrbCheckoutModalContext().skuId;
  return <Text style={styles.disclaimer} variant="text-xxs/normal" color="interactive-text-active">
    {useMemo(() => getOrbCheckoutDisclaimerMessage(skuId), [skuId])}
  </Text>;
}
export function OrbCheckoutPurchaseButton(props) {
  const onPress = props.onPress;
  const theme = useTheme();
  const orbCheckoutModalContext = useOrbCheckoutModalContext();
  let isRedeeming = orbCheckoutModalContext.isRedeeming;
  const orbProductContext = orbCheckoutModalContext.orbProductContext;
  const virtualCurrencyBalance = useVirtualCurrencyBalance();
  const orbPriceAmount = orbProductContext?.orbPriceAmount;
  const props2 = {
    variant: isThemeDark(theme) ? "primary-overlay" : "primary",
    size: "lg",
    text: intl.string(t["zLch/S"]),
    icon: <OrbsIcon size="md" color={isThemeDark(theme) ? "control-overlay-primary-text-default" : "control-primary-text-default"} />,
    iconPosition: "start",
    loading: isRedeeming,
    onPress,
    disabled: null
  };
  if (!isRedeeming) {
    isRedeeming = orbPriceAmount == null;
  }
  if (!isRedeeming) {
    isRedeeming = virtualCurrencyBalance == null;
  }
  if (!isRedeeming) {
    isRedeeming = virtualCurrencyBalance < orbPriceAmount;
  }
  props2.disabled = isRedeeming;
  return <Button {...props2} />;
}