discord-decomp/modules/parent_tools/native/FamilyCenterActivityItemPreview.tsx

// Metro module 13934 (f13935).
import { Image as Image2, View } from "react-native";
import { PROFILE_FRAME_ASPECT_RATIO } from "../../collectibles/profile_frames/native/ProfileFrameConstants";
import { createStyles } from "../../../design/components/Styles/native/createStyles";
import { getAvatarDecorationPreviewUrl, getProfileEffectPreviewUrl, PREVIEW_SIZE, isGuildBoostSubscription, NAMEPLATE_ASPECT_RATIO } from "../FamilyCenterActivityPurchaseRowUtils";
import Module712 from "../../../_bundle/Module712";
import { getNameplateAssets } from "../../collectibles/nameplates/native/NameplateUtils";
import useMaybeFetchProfileFrame from "../../collectibles/profile_frames/hooks/useMaybeFetchProfileFrame";
import ProfileFrameSamplePreview from "../../collectibles/profile_frames/native/previews/ProfileFrameSamplePreview";
import { ShopIcon } from "../../../design/components/Icon/native/redesign/generated/ShopIcon";
import { BoostGemIcon } from "../../../design/components/Icon/native/redesign/generated/BoostGemIcon";
import { NitroWheelIcon } from "../../../design/components/Icon/native/redesign/generated/NitroWheelIcon";
import { CollectiblesItemType } from "../../../_bundle/Module1901";
import { getNameplateDataFromProductRecord } from "../../collectibles/nameplates/utils";
let useStyles, NameplatePreviewImage, ProfileEffectPreviewImage, ProfileFramePreviewImage, SubscriptionPreview, CollectiblePreview;
const AvatarDecorationPreviewImage = function AvatarDecorationPreviewImage(props) {
  const { product, styles } = props;
  const avatarDecorationPreviewUrl = getAvatarDecorationPreviewUrl(product);
  return avatarDecorationPreviewUrl != null ? <Image2 source={{
    uri: avatarDecorationPreviewUrl
  }} style={styles.avatarDecorationPreview} fadeDuration={0} /> : null;
};
NameplatePreviewImage = function NameplatePreviewImage(props) {
  const { nameplateData, styles } = props;
  const staticImageUrl = getNameplateAssets(nameplateData).staticImageUrl;
  return staticImageUrl != null ? <View style={styles.nameplateContainer}>
    <Image2 source={{
      uri: staticImageUrl
    }} style={styles.nameplatePreview} resizeMode="cover" fadeDuration={0} />
  </View> : null;
};
ProfileEffectPreviewImage = function ProfileEffectPreviewImage(props) {
  const { product, styles } = props;
  const profileEffectPreviewUrl = getProfileEffectPreviewUrl(product);
  return profileEffectPreviewUrl != null ? <Image2 source={{
    uri: profileEffectPreviewUrl
  }} style={styles.avatarDecorationPreview} fadeDuration={0} /> : null;
};
ProfileFramePreviewImage = function ProfileFramePreviewImage(props) {
  const { product, styles } = props;
  const maybeFetchProfileFrame = useMaybeFetchProfileFrame(product.skuId, "FamilyCenterActivityItemPreview");
  return maybeFetchProfileFrame != null ? <View style={styles.profileFrameContainer}>
    <ProfileFrameSamplePreview profileFrame={maybeFetchProfileFrame} previewWidth={PREVIEW_SIZE * PROFILE_FRAME_ASPECT_RATIO} previewHeight={PREVIEW_SIZE} profileBackgroundColor={Module712.colors.BACKGROUND_BASE_LOW} />
  </View> : null;
};
SubscriptionPreview = function SubscriptionPreview(props) {
  const { subscriptionPlanId, styles } = props;
  if (subscriptionPlanId == null) {
    return <View style={styles.purchasePlaceholder}>
      <ShopIcon size="custom" style={{
        width: 20,
        height: 20
      }} />
    </View>;
  }
  return <View style={styles.purchasePlaceholder}>
    {isGuildBoostSubscription(subscriptionPlanId) ? <BoostGemIcon size="custom" style={{
      width: 20,
      height: 20
    }} /> : <NitroWheelIcon size="custom" style={{
      width: 20,
      height: 20
    }} />}
  </View>;
};
CollectiblePreview = function CollectiblePreview(props) {
  const { product, styles } = props;
  if (product == null) {
    return <View style={styles.purchasePlaceholder}>
      <ShopIcon size="custom" style={{
        width: 20,
        height: 20
      }} />
    </View>;
  }
  const type = product.type;
  if (CollectiblesItemType.AVATAR_DECORATION === type) {
    return <AvatarDecorationPreviewImage product={product} styles={styles} />;
  }
  if (CollectiblesItemType.NAMEPLATE === type) {
    const nameplateDataFromProductRecord = getNameplateDataFromProductRecord(product);
    return nameplateDataFromProductRecord != null ? <NameplatePreviewImage nameplateData={nameplateDataFromProductRecord} styles={styles} /> : null;
  }
  if (CollectiblesItemType.PROFILE_EFFECT === type) {
    return <ProfileEffectPreviewImage product={product} styles={styles} />;
  }
  if (CollectiblesItemType.PROFILE_FRAME === type) {
    return <ProfileFramePreviewImage product={product} styles={styles} />;
  }
  return <View style={styles.purchasePlaceholder}>
    <ShopIcon size="custom" style={{
      width: 20,
      height: 20
    }} />
  </View>;
};
useStyles = createStyles({
  purchasePlaceholder: {
    width: PREVIEW_SIZE,
    height: PREVIEW_SIZE,
    borderRadius: Module712.radii.xs,
    backgroundColor: Module712.colors.BACKGROUND_SURFACE_HIGH,
    display: "flex",
    alignItems: "center",
    justifyContent: "center",
    marginRight: 12
  },
  avatarDecorationPreview: {
    width: PREVIEW_SIZE,
    height: PREVIEW_SIZE,
    marginRight: 12
  },
  nameplateContainer: {
    width: PREVIEW_SIZE,
    height: PREVIEW_SIZE,
    marginRight: 12,
    borderRadius: Module712.radii.xs,
    overflow: "hidden",
    position: "relative"
  },
  nameplatePreview: {
    position: "absolute",
    right: 0,
    width: PREVIEW_SIZE * NAMEPLATE_ASPECT_RATIO,
    height: PREVIEW_SIZE
  },
  profileFrameContainer: {
    width: PREVIEW_SIZE,
    height: PREVIEW_SIZE,
    marginRight: 12,
    alignItems: "center",
    justifyContent: "center"
  }
});
export default function FamilyCenterActivityItemPreview(props) {
  const { displayName, product, isSubscription, subscriptionPlanId } = props;
  const styles = useStyles();
  return <View accessible accessibilityLabel={displayName}>
    {isSubscription ? <SubscriptionPreview subscriptionPlanId={subscriptionPlanId} styles={styles} /> : <CollectiblePreview product={product} styles={styles} />}
  </View>;
};