// Metro module 12582 (f12583).
import { useState, useEffect } from "react";
import { Image as Image2, View } from "react-native";
import LocaleStore from "../../user_settings/LocaleStore";
import IAPStore_android from "../../../stores/native/IAPStore.android";
import { usePremiumPlanSelectStore } from "./PremiumPlanSelectStore";
import { PREMIUM_YEARLY_DISCOUNT_PERCENT } from "../PremiumConstants";
import { Fonts } from "../../../_bundle/Module505";
import { createStyles } from "../../../design/components/Styles/native/createStyles";
import TextStyles from "../../rebrand/native/TextStyles";
import { DARK_WHITE_500_LIGHT_BLACK_500 } from "../../../design/migrations/native/LegacyTokens";
import { getPremiumBundledItemsFromProductId } from "./PremiumBundledPlansUtils";
import { useStateFromStores, useStateFromStoresArray } from "../../../_bundle/Module589";
import { formatPercent } from "../../../utils/NumberUtils";
import Alert from "../../../components_native/common/Alert";
import Module12583 from "../../../_bundle/Module12583";
import { LegacyText } from "../../../design/void/native";
import { intl, t } from "../../../intl/index.native";
import { getPremiumTypeDisplayName } from "../../../utils/PremiumUtils";
import { Button } from "../../../design/components/Button/native/Button.native";
const useStyles = createStyles({
  container: {
    marginHorizontal: 26
  },
  image: {
    alignSelf: "center",
    marginVertical: 32
  },
  header: {
    ...TextStyles(Fonts.DISPLAY_EXTRABOLD, void 0, 24),
    alignSelf: "center",
    textAlign: "center",
    paddingBottom: 8,
    color: DARK_WHITE_500_LIGHT_BLACK_500
  },
  description: {
    alignSelf: "center",
    textAlign: "center",
    paddingBottom: 32,
    color: DARK_WHITE_500_LIGHT_BLACK_500
  },
  upsellButton: {
    marginBottom: 16
  },
  continueButton: {
    marginBottom: 4
  },
  cancelButton: {
    marginTop: 8,
    marginBottom: 4
  }
});
export default function PremiumPlanSelectYearlyUpsellModal(props) {
  let setState, c19909_4;
  const { onClose, productId } = props;
  let orderPriceString = props.orderPriceString;
  const { continueWithUpsell, continueWithDefault } = props;
  setState = void 0;
  c19909_4 = void 0;
  const styles = useStyles();
  const premiumPlanSelectStore = usePremiumPlanSelectStore((a0) => a0.isPurchasing);
  let state;
  [state, setState] = useState(null);
  const premiumBundledItemsFromProductId = getPremiumBundledItemsFromProductId(productId);
  const stateFromStores = useStateFromStores([LocaleStore], () => LocaleStore.locale);
  const [r55, r56] = useStateFromStoresArray([IAPStore_android], () => [IAPStore_android.getProduct(productId), IAPStore_android.isBusy()]);
  const disabled = premiumPlanSelectStore ? premiumPlanSelectStore : r56;
  const premiumTier = premiumBundledItemsFromProductId.premiumTier;
  if (orderPriceString == null) {
    orderPriceString = r55?.priceString;
  }
  const r58 = premiumTier == null || orderPriceString == null;
  c19909_4 = r58;
  useEffect(() => {
    if (c19909_4) {
      continueWithDefault();
    }
  });
  if (r58) {
    return null;
  }
  const discountPercentage = formatPercent(stateFromStores, PREMIUM_YEARLY_DISCOUNT_PERCENT / 100);
  return <Alert onClose={onClose} noDefaultButtons>
    <View style={styles.container}>
      <Image2 style={styles.image} source={Module12583} />
      <LegacyText style={styles.header} accessibilityRole="header">
        {intl.format(t.LQCVfK, {
          discountPercentage,
          planName: getPremiumTypeDisplayName(premiumTier)
        })}
      </LegacyText>
      <LegacyText style={styles.description}>
        {intl.format(t["7chOVL"], {
          discountPercentage
        })}
      </LegacyText>
      <View style={styles.upsellButton}>
        <Button variant="active" text={intl.formatToPlainString(t.Qvq6GE, {
          price: orderPriceString
        })} onPress={() => {
          setState("upsell");
          continueWithUpsell();
        }} disabled={disabled} loading={state === "upsell" && premiumPlanSelectStore} />
      </View>
      <View style={styles.continueButton}>
        <Button variant="secondary" text={intl.string(t.YwEyQM)} onPress={() => {
          setState("default");
          continueWithDefault();
        }} disabled={disabled} loading={state === "default" && premiumPlanSelectStore} />
      </View>
      <View style={styles.cancelButton}>
        <Button variant="tertiary" text={intl.string(t.cpT0Cq)} onPress={onClose} />
      </View>
    </View>
  </Alert>;
};