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

// Metro module 8741 (f8742).
import { useCallback, useEffect, useMemo, useState } from "react";
import { View } from "react-native";
import { ShopCtaEnum } from "../CollectiblesShopConstants";
import { createStyles } from "../../../design/components/Styles/native/createStyles";
import Module712 from "../../../_bundle/Module712";
import { CollectiblesItemType } from "../../../_bundle/Module1901";
import { useCollectiblesMobileFlexibleBundlesExperiment } from "../experiments/CollectiblesMobileFlexibleBundlesExperiment";
import BundleProductDetailsActionSheetPreview from "./BundleProductDetailsActionSheetPreview";
import { useShopProductItems } from "../hooks/useShopProductItems";
import { intl, t } from "../../../intl/index.native";
import { ProfileEffectPreview, AvatarDecorationPreview, NameplatePreview, IndividualProductPreview } from "./IndividualProductPreview";
import { useSegmentedControlState } from "../../../design/components/SegmentedControl/native/SegmentedControlState.native";
import { SegmentedControlPages } from "../../../design/components/SegmentedControl/native/SegmentedControlPages.native";
import { SegmentedControl } from "../../../design/components/SegmentedControl/native/SegmentedControl.native";
let useStyles, c5702_13, BundlePreview;
const BundleProductPreview = function BundleProductPreview(props) {
  const { product: product2, width: width2, handlePreviewPress: handlePreviewPress2, onTrackPress: onTrackPress2, onActiveItemChange: onActiveItemChange2, onActiveItemTypeChange: onActiveItemTypeChange2 } = props;
  const styles = useStyles();
  return useCollectiblesMobileFlexibleBundlesExperiment("ProductDetailsActionSheetPreview").enabled ? <BundleProductDetailsActionSheetPreview product={product2} width={width2} handlePreviewPress={handlePreviewPress2} onTrackPress={onTrackPress2} onActiveItemChange={onActiveItemChange2} /> : <View style={styles.previewDivider}>
    <BundlePreview product={product2} width={width2} handlePreviewPress={handlePreviewPress2} onTrackPress={onTrackPress2} onActiveItemChange={onActiveItemChange2} onActiveItemTypeChange={onActiveItemTypeChange2} />
  </View>;
};
BundlePreview = function BundlePreview(props) {
  let memo2;
  const { product, width, handlePreviewPress, onTrackPress, onActiveItemChange, onActiveItemTypeChange } = props;
  memo2 = void 0;
  const shopProductItems = useShopProductItems(product);
  const [state, setState] = useState(0);
  const memo = useMemo(() => [shopProductItems.firstProfileEffect != null ? {
    label: intl.string(t["s+YSgo"]),
    id: "profile",
    page: <ProfileEffectPreview profileEffect={shopProductItems.firstProfileEffect} profileEffectRestartKey={state} width={width} handlePreviewPress={handlePreviewPress} onTrackPress={onTrackPress} />
  } : null, shopProductItems.firstAvatarDecoration != null ? {
    label: intl.string(t.aVCcr8),
    id: "decoration",
    page: <AvatarDecorationPreview product={product} handlePreviewPress={handlePreviewPress} onTrackPress={onTrackPress} />
  } : null, shopProductItems.firstNameplate != null ? {
    label: intl.string(t.HNnSVZ),
    id: "nameplate",
    page: <NameplatePreview product={product} />
  } : null].filter((item) => item != null), [product, width, handlePreviewPress, shopProductItems, onTrackPress, state]);
  memo2 = useMemo(() => ({
    profile: shopProductItems.firstProfileEffect,
    decoration: shopProductItems.firstAvatarDecoration,
    nameplate: shopProductItems.firstNameplate
  }), [shopProductItems]);
  useEffect(() => {
    let firstProfileEffect = shopProductItems.firstProfileEffect;
    if (firstProfileEffect == null) {
      firstProfileEffect = shopProductItems.firstAvatarDecoration;
    }
    if (firstProfileEffect == null) {
      firstProfileEffect = shopProductItems.firstNameplate;
    }
    if (firstProfileEffect != null && onActiveItemChange != null) {
      onActiveItemChange(firstProfileEffect);
    }
  }, [shopProductItems, onActiveItemChange]);
  const segmentedControlState = useSegmentedControlState({
    items: memo,
    pageWidth: width,
    defaultIndex: 0,
    onPageChange: (a0) => {
      const id = memo[a0]?.id;
      if (id != null) {
        const r6 = c5702_13[id];
        if (r6 != null && onActiveItemTypeChange != null) {
          onActiveItemTypeChange(r6);
        }
        const r14 = memo2[id];
        if (r14 != null && onActiveItemChange != null) {
          onActiveItemChange(r14);
        }
      }
      if (id === "profile") {
        setState((prevState) => prevState + 1);
      }
    },
    onSetActiveIndex: (a0) => {
      const id = memo[a0]?.id;
      if (id === "profile") {
        if (onTrackPress != null) {
          onTrackPress(ShopCtaEnum.BUNDLE_VIEW_PROFILE_EFFECT);
        }
      } else if (id === "decoration") {
        if (onTrackPress != null) {
          onTrackPress(ShopCtaEnum.BUNDLE_VIEW_AVATAR_DECORATION);
        }
      } else if (id === "nameplate" && onTrackPress != null) {
        onTrackPress(ShopCtaEnum.BUNDLE_VIEW_NAMEPLATE);
      }
    }
  });
  return <View>
    <SegmentedControlPages state={segmentedControlState} />
    <View style={{
      paddingHorizontal: Module712.space.PX_16,
      paddingTop: Module712.space.PX_12
    }}>
      <SegmentedControl state={segmentedControlState} variant="default" />
    </View>
  </View>;
};
useStyles = createStyles({
  previewContainer: {
    flex: 1
  },
  previewDivider: {
    borderBottomColor: Module712.colors.BACKGROUND_MOD_SUBTLE,
    borderBottomWidth: 1,
    paddingBottom: Module712.space.PX_16,
    flex: 1
  }
});
c5702_13 = {
  profile: CollectiblesItemType.PROFILE_EFFECT,
  decoration: CollectiblesItemType.AVATAR_DECORATION,
  nameplate: CollectiblesItemType.NAMEPLATE
};
export default function ProductDetailsActionSheetPreview(props) {
  const { product: product2, handlePreviewPress: handlePreviewPress2, onTrackPress: onTrackPress2, onBundleActiveItemTypeChange, onBundleActiveItemChange } = props;
  const styles = useStyles();
  const [width2, setState2] = useState(0);
  return <View style={styles.previewContainer} onLayout={useCallback((a0) => {
    setState2(a0.nativeEvent.layout.width);
  }, [])}>
    {product2.type === CollectiblesItemType.BUNDLE ? <BundleProductPreview product={product2} width={width2} handlePreviewPress={handlePreviewPress2} onTrackPress={onTrackPress2} onActiveItemChange={onBundleActiveItemChange} onActiveItemTypeChange={onBundleActiveItemTypeChange} /> : <View style={styles.previewDivider}>
      <IndividualProductPreview product={product2} width={width2} handlePreviewPress={handlePreviewPress2} onTrackPress={onTrackPress2} />
    </View>}
  </View>;
};