// Metro module 11884 (f11885).
import { useMemo } from "react";
import { View } from "react-native";
import { EXTERNAL_PRODUCT_SKU_IDS } from "../CollectiblesShopConstants";
import { BUNDLE_PREVIEW_CONFIG, SAMPLE_PROFILE_ASPECT_RATIO } from "./CollectiblesPreviewConstants";
import { createStyles } from "../../../design/components/Styles/native/createStyles";
import Module712 from "../../../_bundle/Module712";
import useProfileEffect from "../profile_effects/useProfileEffect";
import FastImage from "../../../components_native/common/FastImage";
import Module11885 from "../../../_bundle/Module11885";
import useMaybeFetchProfileFrame from "../profile_frames/hooks/useMaybeFetchProfileFrame";
import ProfileFrameSamplePreview from "../profile_frames/native/previews/ProfileFrameSamplePreview";
import { useShopProductItems } from "../hooks/useShopProductItems";
import { useCollectiblesMobileFlexibleBundlesExperiment } from "../experiments/CollectiblesMobileFlexibleBundlesExperiment";
import BundleSampleV2 from "./BundleSampleV2";
import { getNameplateData } from "../nameplates/utils";
import Nameplate from "../nameplates/native/Nameplate";
import { CollectiblesItemType } from "../../../_bundle/Module1901";
import { FractionalPremiumSKUsSets } from "../../../_bundle/Module679";
import { FractionalNitroCoinIllustration, FRACTIONAL_NITRO_COIN_SIZE } from "./FractionalNitroCoinIllustration";
import Module8713 from "../../../_bundle/Module8713";
import AvatarDecorationSampleV2 from "./AvatarDecorationSampleV2";
import { intl, t } from "../../../intl/index.native";
import { Text } from "../../../design/components/Text/native/Text";
import { getProductOrbPrice } from "../utils/CollectiblesProductUtils";
import { getFormattedPriceForCollectiblesProduct } from "./CollectiblesUtils";
import OrbCheckoutAmountTag from "../../virtual_currency/native/OrbCheckoutAmountTag";
import { useCurrentUser } from "../hooks/useCurrentUser";
import PremiumUtils from "../../../utils/PremiumUtils";
import { getProductNameAndTypeLabel } from "../utils/getProductName";
let useStyles, useStyles2, useStyles3, useStyles4, ProfileFrameAssetPreview, BundleAssetPreview, NameplateAssetPreview, CollectibleProductPreview, CollectibleProductPreviewContent, ProductDetails, ProductPriceAmountTag;
const ProfileEffectAssetPreview = function ProfileEffectAssetPreview(props) {
  const item = props.item;
  const styles3 = useStyles3();
  const profileEffect = useProfileEffect(item.skuId);
  return profileEffect != null ? <View style={styles3.profileEffectContainer}>
    <FastImage source={{
      uri: Module11885
    }} alt={profileEffect.accessibilityLabel} style={styles3.profileEffect} resizeMode="cover" />
    <FastImage style={styles3.profileEffect} source={{
      uri: profileEffect.thumbnailPreviewSrc
    }} alt={profileEffect.title} resizeMode="cover" />
  </View> : null;
};
ProfileFrameAssetPreview = function ProfileFrameAssetPreview(props) {
  const { item, width: width2, height: height3 } = props;
  const maybeFetchProfileFrame = useMaybeFetchProfileFrame(item.skuId, "CollectiblesShopCheckoutDetails");
  return maybeFetchProfileFrame != null ? <ProfileFrameSamplePreview profileFrame={maybeFetchProfileFrame} previewWidth={width2} previewHeight={height3} profileBackgroundColor={Module712.colors.BACKGROUND_BASE_LOW} /> : null;
};
BundleAssetPreview = function BundleAssetPreview(props) {
  const { product: product4, width, height } = props;
  const styles = useStyles();
  const shopProductItems = useShopProductItems(product4);
  const { firstProfileEffect, firstAvatarDecoration, firstNameplate } = shopProductItems;
  const enabled = useCollectiblesMobileFlexibleBundlesExperiment("CollectiblesShopCheckoutDetails").enabled;
  const bundleWidth = BUNDLE_PREVIEW_CONFIG.small.bundleWidth;
  const height2 = enabled ? bundleWidth : Math.round(1.1494252873563218 * bundleWidth);
  const scale = width / height2;
  return <View style={useMemo(() => [styles.bundlePreviewContainer, {
    width,
    height
  }], [styles.bundlePreviewContainer, width, height])}>
    <View style={useMemo(() => [styles.bundlePreviewScale, {
      width: bundleWidth,
      height: height2,
      transform: [{
        scale
      }]
    }], [styles.bundlePreviewScale, bundleWidth, height2, scale])}>
      <BundleSampleV2 deco={firstAvatarDecoration} pfx={firstProfileEffect} nameplate={firstNameplate} previewAssets={product4.previewAssets} disableStaticBackground size="small" targetSize={useMemo(() => ({
        width,
        height
      }), [width, height])} exposureLocation="CollectiblesShopCheckoutDetails" />
    </View>
  </View>;
};
NameplateAssetPreview = function NameplateAssetPreview(props) {
  const item = props.item;
  const styles4 = useStyles4();
  return <Nameplate nameplate={getNameplateData(item)} fullOpacity isSquarePreview style={styles4.nameplate} />;
};
CollectibleProductPreview = function CollectibleProductPreview(props) {
  const { product: product4, recipientUser } = props;
  const styles2 = useStyles();
  const width2 = product4.type !== CollectiblesItemType.PROFILE_EFFECT ? product4.type === CollectiblesItemType.PROFILE_FRAME ? 42 : 55 : 42;
  return <View style={[styles2.productPreviewContainer, {
    height: 55,
    width: width2
  }]}>
    <CollectibleProductPreviewContent product={product4} width={width2} height={55} userAvatarSource={recipientUser == null ? void 0 : recipientUser.getAvatarSource(void 0, false, width2)} />
  </View>;
};
CollectibleProductPreviewContent = function CollectibleProductPreviewContent(props) {
  const { product: product4, width: width2, height: height3, userAvatarSource } = props;
  const styles2 = useStyles();
  if (FractionalPremiumSKUsSets.ALL.has(product4.skuId)) {
    return <FractionalNitroCoinIllustration skuId={product4.skuId} width={FRACTIONAL_NITRO_COIN_SIZE.CHECKOUT} height={FRACTIONAL_NITRO_COIN_SIZE.CHECKOUT} />;
  }
  if (product4.skuId === EXTERNAL_PRODUCT_SKU_IDS.ORB_PROFILE_BADGE) {
    return <FastImage source={{
      uri: Module8713
    }} style={styles2.externalProductImage} />;
  }
  const type = product4.type;
  if (CollectiblesItemType.AVATAR_DECORATION === type) {
    return <AvatarDecorationSampleV2 item={product4.items[0]} size={width2} avatarSource={userAvatarSource} animate={false} />;
  }
  if (CollectiblesItemType.PROFILE_EFFECT === type) {
    return <ProfileEffectAssetPreview item={product4.items[0]} />;
  }
  if (CollectiblesItemType.NAMEPLATE === type) {
    return <NameplateAssetPreview item={product4.items[0]} />;
  }
  if (CollectiblesItemType.PROFILE_FRAME === type) {
    return <ProfileFrameAssetPreview item={product4.items[0]} width={width2} height={height3} />;
  }
  if (CollectiblesItemType.BUNDLE === type) {
    return <BundleAssetPreview product={product4} width={width2} height={height3} />;
  }
  return null;
};
ProductDetails = function ProductDetails(props) {
  const { product, recipientUser } = props;
  const styles2 = useStyles();
  const memo = useMemo(() => {
    if (FractionalPremiumSKUsSets.ALL.has(product.skuId)) {
      return intl.string(t.DFMPWS);
    }
    if (product.skuId === EXTERNAL_PRODUCT_SKU_IDS.ORB_PROFILE_BADGE) {
      return intl.string(t["0+rBWT"]);
    }
    const type = product.type;
    if (CollectiblesItemType.AVATAR_DECORATION === type) {
      return intl.string(t["7v0T9P"]);
    }
    if (CollectiblesItemType.PROFILE_EFFECT === type) {
      return intl.string(t.wR5wOo);
    }
    if (CollectiblesItemType.NAMEPLATE === type) {
      return intl.string(t.x5CoXR);
    }
    if (CollectiblesItemType.PROFILE_FRAME === type) {
      return intl.string(t.GWrZOd);
    }
    if (CollectiblesItemType.BUNDLE === type) {
      return intl.string(t.Zr5tjn);
    }
    return null;
  }, [product.type, product.skuId]);
  return memo == null ? <View style={styles2.productDetails}>
    <Text variant="text-md/semibold">{product.name}</Text>
  </View> : <View style={styles2.productDetails}>
    <CollectibleProductPreview product={product} recipientUser={recipientUser} />
    <View style={styles2.productDetailsTextContainer}>
      <Text variant="text-md/semibold">{product.name}</Text>
      <Text variant="text-sm/medium">{memo}</Text>
    </View>
  </View>;
};
ProductPriceAmountTag = function ProductPriceAmountTag(props) {
  const { product: product2, hasShopDiscount, useOrbPrice } = props;
  const memo = useMemo(() => {
    let orbPrice, priceText;
    if (useOrbPrice) {
      orbPrice = getProductOrbPrice({
        product: product2,
        hasShopDiscount
      });
      priceText = void 0;
    } else {
      priceText = getFormattedPriceForCollectiblesProduct(product2, hasShopDiscount, true);
      orbPrice = void 0;
    }
    return {
      orbPrice,
      priceText
    };
  }, [product2, hasShopDiscount, useOrbPrice]);
  const { orbPrice, priceText } = memo;
  return useOrbPrice ? <OrbCheckoutAmountTag orbAmount={orbPrice?.amount} /> : <Text variant="text-md/semibold">{priceText}</Text>;
};
useStyles = createStyles({
  externalProductImage: {
    width: 45,
    height: 45
  },
  bundlePreviewContainer: {
    alignItems: "center",
    justifyContent: "center",
    overflow: "hidden",
    borderRadius: Module712.radii.xs
  },
  bundlePreviewScale: {
    overflow: "hidden",
    alignItems: "center",
    justifyContent: "center"
  },
  productContainer: {
    borderRadius: Module712.radii.lg,
    flexDirection: "column",
    backgroundColor: Module712.colors.BACKGROUND_MOD_SUBTLE
  },
  productDetailsContainer: {
    flexDirection: "row",
    alignItems: "center",
    justifyContent: "space-between",
    paddingHorizontal: Module712.space.PX_16,
    paddingVertical: Module712.space.PX_16
  },
  productPreviewContainer: {
    justifyContent: "center",
    alignItems: "center"
  },
  productDetails: {
    display: "flex",
    flexDirection: "row",
    alignItems: "center",
    gap: Module712.space.PX_12
  },
  productDetailsTextContainer: {
    gap: Module712.space.PX_4
  },
  errorContainer: {
    height: 36,
    backgroundColor: Module712.colors.BACKGROUND_SURFACE_HIGH,
    justifyContent: "center",
    paddingHorizontal: Module712.space.PX_16,
    borderBottomLeftRadius: Module712.radii.lg,
    borderBottomRightRadius: Module712.radii.lg
  }
});
useStyles2 = createStyles((a0) => ({
  giftProductContainer: {
    borderWidth: 2,
    borderColor: a0 ? Module712.colors.BACKGROUND_BRAND : Module712.colors.BORDER_FEEDBACK_CRITICAL,
    marginHorizontal: Module712.space.PX_16,
    backgroundColor: void 0
  }
}));
useStyles3 = createStyles({
  profileEffectContainer: {
    position: "relative",
    width: "100%",
    height: "100%",
    borderRadius: Module712.radii.xs,
    overflow: "hidden"
  },
  profileEffect: {
    position: "absolute",
    width: "100%",
    aspectRatio: SAMPLE_PROFILE_ASPECT_RATIO,
    top: 0
  }
});
useStyles4 = createStyles({
  nameplate: {
    borderRadius: Module712.radii.xs
  }
});
export default function CollectiblesShopCheckoutDetails(props) {
  const { product: product3, recipientUser, isValidRecipient = false, useOrbPrice: useOrbPrice2 = false } = props;
  let c19252_1 = useOrbPrice2;
  let isGift = props.isGift;
  if (isGift === void 0) {
    isGift = false;
  }
  const styles2 = useStyles();
  const styles22 = useStyles2(isValidRecipient);
  const canUseShopDiscounts = PremiumUtils.canUseShopDiscounts(useCurrentUser());
  const memo = useMemo(() => {
    let r19;
    const productNameAndTypeLabel = getProductNameAndTypeLabel(product3);
    if (c19252_1) {
      const W4DfeF = t.W4DfeF;
      let orbAmount = getProductOrbPrice({
        product: product3,
        hasShopDiscount: canUseShopDiscounts
      })?.amount;
      if (orbAmount == null) {
        orbAmount = "";
      }
      r19 = intl.formatToPlainString(W4DfeF, {
        orbAmount
      });
    } else {
      r19 = getFormattedPriceForCollectiblesProduct(product3, canUseShopDiscounts, true);
      if (r19 == null) {
        r19 = "";
      }
    }
    return `${productNameAndTypeLabel}, ${r19}`;
  }, [product3, useOrbPrice2, canUseShopDiscounts]);
  const style = [styles2.productContainer, isGift ? styles22.giftProductContainer : isGift];
  const r47 = [<View style={styles2.productDetailsContainer} accessibilityLabel={memo} accessible>
    <ProductDetails product={product3} recipientUser={recipientUser} />
    <ProductPriceAmountTag product={product3} hasShopDiscount={canUseShopDiscounts} useOrbPrice={useOrbPrice2} />
  </View>, ,];
  if (isGift) {
    isGift = !isValidRecipient;
  }
  if (isGift) {
    isGift = <View style={styles2.errorContainer}>
      <Text variant="text-xs/semibold" color="text-feedback-critical">
        {intl.string(t["3YfczA"])}
      </Text>
    </View>;
  }
  r47[1] = isGift;
  return <View style={style}>{r47}</View>;
};