// Metro module 9783 (f9784).
import { useEffect } from "react";
import { StyleSheet, View } from "react-native";
import BadgeDirectoryStore from "../../../badges/BadgeDirectoryStore";
import { isAvatarDecorationRecord } from "../../../collectibles/records/AvatarDecorationRecord";
import { isNameplateRecord } from "../../../collectibles/records/NameplateRecord";
import UserStore from "../../../../stores/UserStore";
import PromotionsStore from "../../promotions/PromotionsStore";
import { HelpdeskArticles } from "../../../../Constants";
import { createStyles } from "../../../../design/components/Styles/native/createStyles";
import Module712 from "../../../../_bundle/Module712";
import useSafeAreaInsetsKeyboardAware_native from "../../../safe_area/useSafeAreaInsetsKeyboardAware.native";
import Nameplate from "../../../collectibles/nameplates/native/Nameplate";
import { getNameplateData } from "../../../collectibles/nameplates/utils";
import { Avatar, AvatarSizes } from "../../../../design/void/native";
import { Text } from "../../../../design/components/Text/native/Text";
import { intl, t } from "../../../../intl/index.native";
import Module4611 from "../../../../_bundle/Module4611";
import GiftingRewardPreviewAvatar from "../../gifting/native/views/GiftingRewardPreviewAvatar";
import { useNavigation } from "../../../../design/components/Navigator/native/useNavigation.native";
import { useNativeGiftContext } from "../../../payments/native/NativeGiftContext";
import { useStateFromStores, useStateFromStoresObject } from "../../../../_bundle/Module589";
import { useCanPurchaseIAP } from "../../../../utils/native/IAPUtils";
import { MarketingComponentType } from "../../../../_bundle/Module6567";
import { GiftCustomizationBanner_AssetVariant } from "../../../../_bundle/Module6280";
import useShouldShowGiftingPromotionDeco from "../../gifting/native/hooks/useShouldShowGiftingPromotionDeco";
import { GiftingBadgeExperiment } from "../../gifting/experiments/GiftingBadgeExperiment";
import { BadgeId } from "../../../../_bundle/Module8106";
import { PaymentFlowStep } from "../PremiumAnalyticsUtils";
import { PremiumGiftScreens } from "./PremiumGiftModal";
import { useFetchCollectiblesProduct } from "../../../collectibles/hooks/useFetchCollectiblesProduct";
import { useThemeAndReducedMotionAwareAssetUrl } from "../../promotions/MarketingComponentHooks";
import FastImage from "../../../../components_native/common/FastImage";
import { IconButton } from "../../../../design/components/Button/native/IconButton.native";
import { PencilIcon } from "../../../../design/components/Icon/native/redesign/generated/PencilIcon";
import GiftingBadgeProgressBanner from "../../gifting/native/views/GiftingBadgeProgressBanner";
import AnalyticsLocation from "../../../app_analytics/AnalyticsLocation";
import HelpdeskUtils from "../../../../utils/HelpdeskUtils";
import { Button } from "../../../../design/components/Button/native/Button.native";
import { dismissKeyboard } from "../../../../utils/native/ChatInputUtils";
let useStyles;
const RewardPreview = function RewardPreview(props) {
  let r30;
  const { collectiblesItem, currentUser, gradientColors } = props;
  let gradientAngle = props.gradientAngle;
  const styles = useStyles(useSafeAreaInsetsKeyboardAware_native().insets.bottom);
  if (isNameplateRecord(collectiblesItem)) {
    r30 = <>
      <View style={styles.nameplateWrapper}>
        <Nameplate nameplate={getNameplateData(collectiblesItem)} fullOpacity animate />
      </View>
      <View style={styles.singleAvatarContainer}>
        <Avatar user={currentUser} guildId={void 0} size={AvatarSizes.SMALL} aria-hidden />
      </View>
      <Text style={styles.selectedRewardText} variant="text-xs/medium">
        {intl.string(t.Rh4oem)}
      </Text>
    </>;
  } else {
    const isAvatarDecorationRecord2 = isAvatarDecorationRecord(collectiblesItem);
    r30 = null;
    if (isAvatarDecorationRecord2) {
      if (gradientAngle == null) {
        gradientAngle = 90;
      }
      r30 = <>
        <Module4611 style={styles.selectedRewardBannerGradient} useAngle angle={gradientAngle} angleCenter={{
          x: 0.5,
          y: 0.5
        }} colors={gradientColors} />
        <View style={styles.singleAvatarContainer}>
          <GiftingRewardPreviewAvatar size={AvatarSizes.NORMAL} asset={collectiblesItem.asset} />
        </View>
        <Text style={styles.selectedRewardText} variant="text-xs/medium" color="text-overlay-light">
          {intl.string(t.Rh4oem)}
        </Text>
      </>;
    }
  }
  return r30;
};
useStyles = createStyles((a0) => ({
  container: {
    backgroundColor: Module712.colors.BACKGROUND_BASE_LOW,
    paddingTop: Module712.space.PX_12,
    paddingBottom: Module712.space.PX_12 + a0,
    paddingHorizontal: Module712.space.PX_16,
    gap: Module712.space.PX_8,
    ...Module712.shadows.SHADOW_TOP_HIGH
  },
  chooseRewardContainer: {
    flexDirection: "row",
    alignItems: "center",
    height: 52
  },
  gradientBackdrop: {
    ...StyleSheet.absoluteFillObject,
    borderRadius: Module712.radii.sm,
    overflow: "hidden"
  },
  chooseRewardText: {
    flex: 1,
    marginStart: Module712.space.PX_8
  },
  backgroundImage: {
    position: "absolute",
    top: 0,
    left: 0,
    right: 0,
    bottom: 0,
    opacity: 1
  },
  inAppFlowImage: {
    width: 58,
    height: 58,
    marginStart: Module712.space.PX_8
  },
  inAppFlowImageLargeTilted: {
    width: 86,
    height: 86,
    transform: [{
      rotate: "-4deg"
    }, {
      translateY: -11
    }]
  },
  singleAvatarContainer: {
    flexDirection: "row",
    paddingRight: 15,
    justifyContent: "center",
    alignItems: "center",
    marginLeft: 5
  },
  selectedRewardRow: {
    flexDirection: "row",
    alignItems: "center",
    gap: Module712.space.PX_16
  },
  selectedRewardBannerContainer: {
    flex: 1,
    flexDirection: "row",
    alignItems: "center",
    height: 52
  },
  selectedRewardBannerGradient: {
    ...StyleSheet.absoluteFillObject,
    borderRadius: Module712.radii.sm,
    top: Module712.space.PX_4,
    bottom: Module712.space.PX_4,
    start: Module712.space.PX_4,
    end: Module712.space.PX_4,
    marginStart: Module712.space.PX_12
  },
  selectedRewardText: {
    flex: 1
  },
  nameplateWrapper: {
    position: "absolute",
    left: 0,
    right: 0,
    top: 0,
    bottom: 0,
    borderRadius: Module712.radii.sm,
    overflow: "hidden"
  }
}));
export default function PremiumGiftPurchaseButton(props) {
  let r144;
  let c17487_8, c17487_9, c17487_10, $mk106748 = function() {
    return (a0) => {
      setSelectedGiftingPromotionReward(a0);
      navigation.navigate(PremiumGiftScreens.CUSTOMIZATION);
    };
  };
  const defaultSelection = props.defaultSelection;
  c17487_8 = void 0;
  c17487_9 = void 0;
  c17487_10 = void 0;
  const styles = useStyles(useSafeAreaInsetsKeyboardAware_native().insets.bottom);
  const navigation = useNavigation();
  const nativeGiftContext = useNativeGiftContext();
  const { onPurchase, isPurchasing, productId, allRewards, claimableRewards, selectedGiftingPromotionReward, setSelectedGiftingPromotionReward, setCurrentAnalyticsStep } = nativeGiftContext;
  const stateFromStores2 = useStateFromStores([UserStore], () => UserStore.getCurrentUser());
  const canPurchaseIAP = useCanPurchaseIAP(productId);
  const stateFromStores = useStateFromStores([PromotionsStore], () => {
    const marketingComponentByType = PromotionsStore.getMarketingComponentByType(MarketingComponentType.GIFT_CUSTOMIZATION_BANNER);
    return marketingComponentByType == null ? null : marketingComponentByType.properties.properties.oneofKind === "giftCustomizationBanner" ? marketingComponentByType.properties.properties.giftCustomizationBanner : null;
  });
  const assetVariant = stateFromStores?.assetVariant;
  const LARGE_TILTED = GiftCustomizationBanner_AssetVariant.LARGE_TILTED;
  const r4 = claimableRewards != null && claimableRewards.length > 0;
  c17487_8 = r4;
  const r71 = claimableRewards != null && claimableRewards.length === 1;
  c17487_9 = r71;
  const shouldShowGiftingPromotionDeco = useShouldShowGiftingPromotionDeco();
  const r19 = shouldShowGiftingPromotionDeco && selectedGiftingPromotionReward == null;
  c17487_10 = r19;
  const enabled = GiftingBadgeExperiment.useConfig({
    location: "PremiumGiftPurchaseButton"
  }).enabled;
  const stateFromStoresObject = useStateFromStoresObject([BadgeDirectoryStore], () => ({
    nextTier: BadgeDirectoryStore.getNextTier(BadgeId.GIFTING),
    giftsToNextTier: BadgeDirectoryStore.getRemainingToNextTier(BadgeId.GIFTING)
  }));
  const { nextTier, giftsToNextTier } = stateFromStoresObject;
  useEffect(() => {
    if (c17487_9) {
      setSelectedGiftingPromotionReward(claimableRewards[0]);
    }
  }, [r71, claimableRewards, setSelectedGiftingPromotionReward]);
  let colors = stateFromStores == null ? void 0 : stateFromStores.gradient?.colors;
  if (colors == null) {
    colors = [];
  }
  const gradientColors = colors.length > 0 ? colors : [String(Module712.colors.BACKGROUND_BRAND), String(Module712.colors.BACKGROUND_BRAND)];
  const product = useFetchCollectiblesProduct(selectedGiftingPromotionReward).product;
  const text = r19 ? intl.string(t["gNZY/B"]) : intl.string(t.ouo4FK);
  const variant = r19 ? "primary" : "active";
  const themeAndReducedMotionAwareAssetUrl2 = useThemeAndReducedMotionAwareAssetUrl(stateFromStores?.mobileBackgroundAsset);
  const themeAndReducedMotionAwareAssetUrl = useThemeAndReducedMotionAwareAssetUrl(stateFromStores?.asset);
  const collectiblesItem = product == null ? void 0 : product.items[0];
  if (r19 && r4) {
    let angle = stateFromStores == null ? void 0 : stateFromStores.gradient?.angle;
    if (angle == null) {
      angle = 90;
    }
    const r212 = [<View style={styles.gradientBackdrop} pointerEvents="none">
      <Module4611 style={StyleSheet.absoluteFillObject} useAngle angle={angle} angleCenter={{
        x: 0.5,
        y: 0.5
      }} colors={colors} />
      {themeAndReducedMotionAwareAssetUrl2 != null && <FastImage style={styles.backgroundImage} resizeMode="cover" source={{
        uri: themeAndReducedMotionAwareAssetUrl2
      }} />}
    </View>, , ,];
    let r213 = themeAndReducedMotionAwareAssetUrl != null;
    if (r213) {
      let r214 = assetVariant === LARGE_TILTED;
      const style = [styles.inAppFlowImage, ,];
      if (r214) {
        r214 = styles.inAppFlowImageLargeTilted;
      }
      style[1] = r214;
      r213 = <FastImage style={style} resizeMode="contain" source={{
        uri: themeAndReducedMotionAwareAssetUrl
      }} />;
    }
    r212[1] = r213;
    r212[2] = <Text style={styles.chooseRewardText} variant="text-xs/semibold" color="text-overlay-light">
      {intl.string(t.cMiNit)}
    </Text>;
    r144 = <View style={styles.chooseRewardContainer}>{r212}</View>;
  } else if (collectiblesItem != null && (shouldShowGiftingPromotionDeco && selectedGiftingPromotionReward != null)) {
    r144 = <View style={styles.selectedRewardRow}>
      <View style={styles.selectedRewardBannerContainer}>
        <RewardPreview collectiblesItem={collectiblesItem} currentUser={stateFromStores2} gradientColors={gradientColors} gradientAngle={stateFromStores == null ? void 0 : stateFromStores.gradient?.angle} />
      </View>
      {r71 ? !r71 : <IconButton variant="tertiary" size="sm" icon={<PencilIcon size="sm" />} accessibilityLabel={intl.string(t.bt75uw)} onPress={function onPress() {
        let defaultHighlightedReward = selectedGiftingPromotionReward;
        if (c17487_8) {
          setCurrentAnalyticsStep(PaymentFlowStep.REWARD_SKU_SELECT);
          if (selectedGiftingPromotionReward == null) {
            defaultHighlightedReward = defaultSelection;
          }
          const REWARD_SELECT = PremiumGiftScreens.REWARD_SELECT;
          let allRewards2 = allRewards;
          if (allRewards == null) {
            allRewards2 = [];
          }
          let claimableRewards2 = claimableRewards;
          if (claimableRewards == null) {
            claimableRewards2 = [];
          }
          navigation.navigate(REWARD_SELECT, {
            defaultHighlightedReward,
            allRewards: allRewards2,
            claimableRewards: claimableRewards2,
            onSelect: $mk106748()
          });
        }
      }} />}
    </View>;
  } else {
    r144 = null;
    if (enabled) {
      const r145 = nextTier != null;
      r144 = null;
      if (r145) {
        let name = nextTier.name;
        if (name == null) {
          name = "";
        }
        r144 = <GiftingBadgeProgressBanner giftsToNextTier={giftsToNextTier} nextTierName={name} nextTierIcon={nextTier.simple_icon_url} analyticsLocation={AnalyticsLocation.PREMIUM_GIFT_CUSTOMIZATION} />;
      }
    }
  }
  return <View style={styles.container}>
    {r144}
    {r19 ? !r19 : <Text variant="text-sm/normal">
      {intl.format(t.hYoGUM, {
        paidURL: HelpdeskUtils.getArticleURL(HelpdeskArticles.PAID_TERMS)
      })}
    </Text>}
    <Button loading={isPurchasing} variant={variant} text={text} disabled={canPurchaseIAP ? isPurchasing : !canPurchaseIAP} onPress={isPurchasing ? void 0 : function() {
      L9: {
        dismissKeyboard();
        if (c17487_10) {
          if (c17487_8) {
            if (!c17487_8) {
              break L9;
            }
            setCurrentAnalyticsStep(PaymentFlowStep.REWARD_SKU_SELECT);
            const REWARD_SELECT = PremiumGiftScreens.REWARD_SELECT;
            let allRewards2 = allRewards;
            if (allRewards == null) {
              allRewards2 = [];
            }
            let claimableRewards2 = claimableRewards;
            if (claimableRewards == null) {
              claimableRewards2 = [];
            }
            navigation.navigate(REWARD_SELECT, {
              defaultHighlightedReward: defaultSelection,
              allRewards: allRewards2,
              claimableRewards: claimableRewards2,
              onSelect: $mk106748()
            });
            break L9;
          }
        }
        onPurchase(() => {
          navigation.navigate(PremiumGiftScreens.SUCCESS);
        });
      }
    }} />
  </View>;
};