// Metro module 9644 (f9645).
import { useEffect } from "react";
import { Image as Image2, ScrollView, View } from "react-native";
import IAPStore_android from "../../../../stores/native/IAPStore.android";
import { AnalyticEvents, AnalyticsObjects, AnalyticsSections } from "../../../../Constants";
import { NUM_FREE_GUILD_BOOSTS_WITH_PREMIUM, PRICE_PLACEHOLDER, SubscriptionPlans } from "../../../premium/PremiumConstants";
import Module9645 from "../../../../_bundle/Module9645";
import { intl, t } from "../../../../intl/index.native";
import Module712 from "../../../../_bundle/Module712";
import Module9646 from "../../../../_bundle/Module9646";
import Module9647 from "../../../../_bundle/Module9647";
import { createStyles } from "../../../../design/components/Styles/native/createStyles";
import { Icon, ButtonColors } from "../../../../design/void/native";
import { Text } from "../../../../design/components/Text/native/Text";
import Dispatcher from "../../../../Dispatcher";
import BillingActionCreators from "../../../../actions/native/BillingActionCreators";
import usePremiumPlanPrice from "../../../premium/native/hooks/usePremiumPlanPrice";
import useWindowDimensions_native from "../../../screen/useWindowDimensions.native";
import useAnalyticsLocations from "../../../app_analytics/useAnalyticsLocations";
import Alert from "../../../../components_native/common/Alert";
import AnalyticsUtils from "../../../../utils/AnalyticsUtils";
import openPremiumModal from "../../../../components_native/premium/openPremiumModal";
import { PressableOpacity } from "../../../../design/void/Pressables/native/Pressables";
import Module7699 from "../../../../_bundle/Module7699";
import Module9648 from "../../../../_bundle/Module9648";
let c6379_16, useStyles;
const PerkRow = function PerkRow(props) {
  const { perk, isLastPerk } = props;
  const styles = useStyles();
  return <View style={[styles.perkRow, isLastPerk ? styles.lastPerkRow : void 0]}>
    <Icon style={styles.perkIcon} source={perk.icon} disableColor={perk.color == null} color={perk.color} />
    <Text style={styles.perkText} variant="text-md/medium" color="interactive-text-active">
      {perk.description()}
    </Text>
  </View>;
};
c6379_16 = [{
  icon: Module9645,
  description: () => intl.string(t.uAfKTe),
  color: Module712.unsafe_rawColors.PREMIUM_PERK_PURPLE
}, {
  icon: Module9646,
  description: () => intl.formatToPlainString(t.aVSVBO, {
    numFreeGuildSubscriptions: NUM_FREE_GUILD_BOOSTS_WITH_PREMIUM
  })
}, {
  icon: Module9647,
  description: () => intl.string(t.pqHIf7),
  color: Module712.unsafe_rawColors.PREMIUM_PERK_GREEN
}];
useStyles = createStyles({
  alert: {
    paddingTop: 18
  },
  shortHeightAlert: {
    height: 500
  },
  content: {
    alignItems: "center"
  },
  closeContainer: {
    flexDirection: "row-reverse",
    width: "100%",
    marginBottom: 16
  },
  description: {
    textAlign: "center",
    lineHeight: 20
  },
  perks: {
    backgroundColor: Module712.colors.BACKGROUND_SURFACE_HIGH,
    borderRadius: Module712.radii.sm,
    marginTop: 16,
    marginBottom: 0,
    paddingHorizontal: 12,
    paddingVertical: 8,
    width: "100%"
  },
  perkRow: {
    paddingVertical: 10,
    borderBottomColor: Module712.unsafe_rawColors.PRIMARY_560,
    borderBottomWidth: 1,
    flexDirection: "row",
    alignItems: "center"
  },
  lastPerkRow: {
    borderBottomWidth: 0
  },
  perkIcon: {
    width: 24,
    marginRight: 20
  },
  perkText: {
    lineHeight: 20,
    flexShrink: 1
  },
  imageHeader: {
    marginBottom: 12
  }
});
export default function StickersPremiumUpsellAlert(props) {
  let analyticsLocations;
  const { onClose, analyticsLocation } = props;
  analyticsLocations = void 0;
  const styles = useStyles();
  useEffect(() => {
    if (!IAPStore_android.isReady()) {
      Dispatcher.wait(() => BillingActionCreators.loadProducts());
    }
  }, []);
  let monthlyPrice = usePremiumPlanPrice(SubscriptionPlans.PREMIUM_MONTH_TIER_2)?.priceString;
  const height = useWindowDimensions_native().height;
  analyticsLocations = useAnalyticsLocations().analyticsLocations;
  const props2 = {
    cancelText: intl.string(t.f3Pet9),
    confirmColor: ButtonColors.GREEN,
    confirmText: intl.string(t.o3Tnif),
    onConfirm: function onConfirm() {
      AnalyticsUtils.track(AnalyticEvents.PREMIUM_PROMOTION_OPENED, {
        location: {
          ...analyticsLocation,
          section: AnalyticsSections.STICKER_PREMIUM_TIER_2_UPSELL_MODAL,
          object: AnalyticsObjects.BUTTON_CTA
        }
      });
      openPremiumModal({
        analyticsLocations
      });
    },
    onClose,
    onCancel: onClose,
    style: [styles.alert, height <= 580 ? styles.shortHeightAlert : null],
    children: null
  };
  const children = [<View style={styles.closeContainer}>
    <PressableOpacity accessibilityRole="button" accessibilityLabel="close" onPress={onClose}>
      <Icon source={Module7699} />
    </PressableOpacity>
  </View>, ,];
  const props3 = {
    style: styles.content,
    onStartShouldSetResponder: () => true,
    children: null
  };
  const children2 = [<Image2 source={Module9648} style={styles.imageHeader} />, , ,];
  const TBsJfQ = t.TBsJfQ;
  if (monthlyPrice == null) {
    monthlyPrice = PRICE_PLACEHOLDER;
  }
  children2[1] = <Text style={styles.description} variant="text-md/medium">
    {intl.format(TBsJfQ, {
      monthlyPrice
    })}
  </Text>;
  children2[2] = <View style={styles.perks}>
    {c6379_16.map((item, index) => <PerkRow key={index} perk={item} isLastPerk={index === c6379_16.length - 1} />)}
  </View>;
  props3.children = children2;
  children[1] = <ScrollView>
    <View {...props3} />
  </ScrollView>;
  props2.children = children;
  return <Alert {...props2} />;
};