discord-decomp/modules/collectibles/native/CollectiblesShopCardAssetTileV2.tsx

// Metro module 8712 (f8713).
import * as Module19 from "react";
import { useMemo } from "react";
import { View, StyleSheet } from "react-native";
import { EXTERNAL_PRODUCT_SKU_IDS } from "../CollectiblesShopConstants";
import { COLLECTIBLES_SHOP_CARD_WIDTH, COLLECTIBLES_SHOP_CARD_HEIGHT } from "./CollectiblesShopCardV2";
import Module712 from "../../../_bundle/Module712";
import { createStyles } from "../../../design/components/Styles/native/createStyles";
import { CheckmarkLargeBoldIcon } from "../../../design/components/Icon/native/redesign/generated/CheckmarkLargeBoldIcon";
import { LockIcon } from "../../../design/components/Icon/native/redesign/generated/LockIcon";
import { getProductType, getSelectedProduct } from "../utils/CollectiblesProductUtils";
import { CollectiblesItemType } from "../../../_bundle/Module1901";
import { useShopProductItems } from "../hooks/useShopProductItems";
import BundleSampleV2 from "./BundleSampleV2";
import FastImage from "../../../components_native/common/FastImage";
import Module8713 from "../../../_bundle/Module8713";
import { FractionalPremiumSKUsSets } from "../../../_bundle/Module679";
import { FractionalNitroCoinIllustration, FRACTIONAL_NITRO_COIN_SIZE } from "./FractionalNitroCoinIllustration";
import AvatarDecorationSampleV2 from "./AvatarDecorationSampleV2";
import ProfileEffectSampleV2 from "./ProfileEffectSampleV2";
import ProfileFrameSamplePreview from "../profile_frames/native/previews/ProfileFrameSamplePreview";
import NameplateCardPreview from "../nameplates/native/NameplateCardPreview";
import { hexToRgbaString, hexWithOpacity } from "../../../utils/ColorUtils";
import { useToken } from "../../../design/tokens/native/useToken";
import { useDefaultVariantIndex } from "../hooks/useDefaultVariantIndex";
let previewHeight, useStyles, DisabledAssetOverlay, ProductPreview, ProductPreviewInner, AssetTileInternal;
const PurchasedAssetOverlay = function PurchasedAssetOverlay() {
  const styles = useStyles();
  return <View style={styles.overlayContainer}>
    <CheckmarkLargeBoldIcon size="lg" style={styles.overlayIcon} />
  </View>;
};
DisabledAssetOverlay = function DisabledAssetOverlay() {
  const styles = useStyles();
  return <View style={styles.overlayContainer}>
    <LockIcon size="lg" style={styles.overlayIcon} />
  </View>;
};
ProductPreview = function ProductPreview(props) {
  const product = props.product;
  let isPurchased = props.isPurchased;
  const { isDisabled, disableBundleStaticBackground, muteBundleStaticBackground, cardWidth: cardWidth2 } = props;
  const styles = useStyles();
  const productType = getProductType(product);
  const height = productType !== CollectiblesItemType.PROFILE_EFFECT && productType !== CollectiblesItemType.PROFILE_FRAME ? product.type === CollectiblesItemType.BUNDLE ? "100%" : "75%" : "100%";
  const style = [styles.overlayContainer, , ,];
  if (!isPurchased) {
    isPurchased = isDisabled;
  }
  if (isPurchased) {
    isPurchased = styles.purchasedOrDisabled;
  }
  style[1] = isPurchased;
  style[2] = {
    height
  };
  return <View style={style} renderToHardwareTextureAndroid needsOffscreenAlphaCompositing>
    <ProductPreviewInner product={product} disableBundleStaticBackground={disableBundleStaticBackground} muteBundleStaticBackground={muteBundleStaticBackground} cardWidth={cardWidth2} />
  </View>;
};
ProductPreviewInner = function ProductPreviewInner(props) {
  const { product, disableBundleStaticBackground, muteBundleStaticBackground, cardWidth } = props;
  const styles = useStyles();
  const shopProductItems = useShopProductItems(product);
  const { firstProfileEffect, firstAvatarDecoration, firstNameplate } = shopProductItems;
  const memo = useMemo(() => {
    let width = cardWidth;
    if (cardWidth == null) {
      width = COLLECTIBLES_SHOP_CARD_WIDTH;
    }
    return {
      width,
      height: COLLECTIBLES_SHOP_CARD_HEIGHT
    };
  }, [cardWidth]);
  if (product.type === CollectiblesItemType.BUNDLE) {
    return <BundleSampleV2 deco={firstAvatarDecoration} pfx={firstProfileEffect} nameplate={firstNameplate} size="small" previewAssets={product.previewAssets} disableStaticBackground={disableBundleStaticBackground} mutedStaticBackground={muteBundleStaticBackground} targetSize={memo} />;
  }
  if (product.skuId === EXTERNAL_PRODUCT_SKU_IDS.ORB_PROFILE_BADGE) {
    return <FastImage source={{
      uri: Module8713
    }} style={styles.externalProductImage} />;
  }
  if (FractionalPremiumSKUsSets.ALL.has(product.skuId)) {
    return <FractionalNitroCoinIllustration skuId={product.skuId} width={FRACTIONAL_NITRO_COIN_SIZE.CARD} height={FRACTIONAL_NITRO_COIN_SIZE.CARD} />;
  }
  const [item] = product.items;
  const type = item?.type;
  if (CollectiblesItemType.AVATAR_DECORATION === type) {
    return <AvatarDecorationSampleV2 item={item} size={100} />;
  }
  if (CollectiblesItemType.PROFILE_EFFECT === type) {
    return <View style={styles.profileEffectContainer}>
      <ProfileEffectSampleV2 item={item} hideBackground />
    </View>;
  }
  if (CollectiblesItemType.PROFILE_FRAME === type) {
    return <View style={styles.profileFrameContainer}>
      <ProfileFrameSamplePreview profileFrame={item} previewWidth={COLLECTIBLES_SHOP_CARD_WIDTH - Module712.space.PX_32} previewHeight={previewHeight} profileBackgroundColor={Module712.colors.BACKGROUND_BASE_LOW} />
    </View>;
  }
  if (CollectiblesItemType.NAMEPLATE === type) {
    return <NameplateCardPreview item={item} />;
  }
  return null;
};
AssetTileInternal = function AssetTileInternal(props) {
  const { children, solidBackground = false } = props;
  return <View style={[useStyles().assetContainer, {
    backgroundColor: hexToRgbaString(hexWithOpacity(useToken(Module712.colors.BACKGROUND_BASE_LOW), solidBackground ? 1 : 0.8))
  }]} importantForAccessibility="no-hide-descendants" accessibilityElementsHidden>{children}</View>;
};
previewHeight = COLLECTIBLES_SHOP_CARD_HEIGHT - 2 * Module712.space.PX_16;
useStyles = createStyles({
  assetContainer: {
    display: "flex",
    justifyContent: "center",
    alignItems: "center",
    overflow: "hidden",
    height: "100%",
    width: "100%",
    borderRadius: Module712.radii.sm
  },
  overlayContainer: {
    ...StyleSheet.absoluteFillObject,
    justifyContent: "center",
    alignItems: "center",
    width: "100%",
    height: "75%"
  },
  profileEffectContainer: {
    width: "100%",
    height: "100%",
    backgroundColor: Module712.colors.BACKGROUND_BASE_LOW
  },
  profileFrameContainer: {
    width: "100%",
    height: previewHeight,
    alignItems: "center"
  },
  externalProductImage: {
    width: 80,
    height: 80,
    resizeMode: "contain"
  },
  purchasedOrDisabled: {
    opacity: 0.4
  },
  overlayIcon: {
    position: "absolute",
    opacity: 1,
    color: Module712.colors.ICON_STRONG,
    fontWeight: "bold"
  }
});
const r76 = Module19.memo(function AssetTileV2(props) {
  const { product, isPurchased, solidBackground } = props;
  let isDisabled = props.isDisabled;
  const { disableBundleStaticBackground, muteBundleStaticBackground, cardWidth: cardWidth2 } = props;
  const r28 = [<ProductPreview product={getSelectedProduct(product, useDefaultVariantIndex(product))} isPurchased={isPurchased} isDisabled={isDisabled} disableBundleStaticBackground={disableBundleStaticBackground} muteBundleStaticBackground={muteBundleStaticBackground} cardWidth={cardWidth2} />, isPurchased && <PurchasedAssetOverlay />, ,];
  if (isDisabled) {
    isDisabled = !isPurchased;
  }
  if (isDisabled) {
    isDisabled = <DisabledAssetOverlay />;
  }
  r28[2] = isDisabled;
  return <AssetTileInternal solidBackground={solidBackground}>{r28}</AssetTileInternal>;
});
export default r76;