discord-decomp/modules/user_profile/native/EditProfileEffectActionSheet.tsx

// Metro module 13722 (f13723).
import { useEffect, useCallback, useMemo, useState } from "react";
import { View, StyleSheet } from "react-native";
import CollectiblesPurchaseStore from "../../collectibles/CollectiblesPurchaseStore";
import { isProfileEffectRecord } from "../../collectibles/records/ProfileEffectRecord";
import { AnalyticEvents } from "../../../Constants";
import { createStyles } from "../../../design/components/Styles/native/createStyles";
import Module712 from "../../../_bundle/Module712";
import useDisplayProfile from "../hooks/useDisplayProfile";
import { useBottomSheetRef } from "../../../design/components/Sheet/native/useBottomSheetRef";
import useAnalyticsLocations, { AnalyticsLocationProvider } from "../../app_analytics/useAnalyticsLocations";
import AnalyticsLocation from "../../app_analytics/AnalyticsLocation";
import AnalyticsUtils from "../../../utils/AnalyticsUtils";
import { setTryItOutProfileEffect } from "../UserProfileActionCreators";
import { setPendingChanges } from "../UserProfileSettingsActionCreators";
import { BottomSheet } from "../../../design/components/Sheet/native/BottomSheet.native";
import { Text } from "../../../design/components/Text/native/Text";
import { intl, t } from "../../../intl/index.native";
import EditCollectiblesCTAButton from "./EditCollectiblesCTAButton";
import { useGetOrFetchCollectiblesCategoriesAndPurchases } from "../../collectibles/hooks/useFetchCollectiblesCategoriesAndPurchases";
import { useStateFromStores } from "../../../_bundle/Module589";
import useProfileEffectSections from "../../collectibles/profile_effects/useProfileEffectSections";
import { getProfilePreviewValue } from "../../profile_customization/ProfileCustomizationUtils";
import maybeFetchUserProfile from "../maybeFetchUserProfile";
import { EditProfileEffectRow } from "../../collectibles/profile_effects/native/EditProfileEffectSection";
import EditCollectiblesPreviewDetails from "./EditCollectiblesPreviewDetails";
import { EditCollectiblesPickerList } from "../../collectibles/native/EditCollectiblesPickerList";
import useCollectiblesData from "../../collectibles/hooks/useCollectiblesData";
import ProfileEffectUserPreview from "../../collectibles/profile_effects/native/previews/ProfileEffectUserPreview";
import Module4611 from "../../../_bundle/Module4611";
let useStyles, ProfileEffectSectionPreview;
const EditProfileEffectInner = function EditProfileEffectInner(props) {
  const { user, selectedProfileEffect, setSelectedProfileEffect, guildId, isTryItOut: isTryItOut3 = false } = props;
  const isTryItOut = isTryItOut3;
  useGetOrFetchCollectiblesCategoriesAndPurchases();
  const stateFromStores = useStateFromStores([CollectiblesPurchaseStore], () => CollectiblesPurchaseStore.isFetching);
  const profileEffectSections = useProfileEffectSections();
  const displayProfile = useDisplayProfile(user.id, guildId);
  const profilePreviewValue = getProfilePreviewValue({
    pendingValue: selectedProfileEffect,
    userValue: displayProfile == null ? void 0 : displayProfile._userProfile?.profileEffect,
    guildValue: displayProfile == null ? void 0 : displayProfile._guildMemberProfile?.profileEffect,
    guildId
  });
  useEffect(() => {
    if (!(user == null || user.isNonUserBot())) {
      maybeFetchUserProfile(user.id, user.getAvatarURL(null, 80), {
        withMutualGuilds: true,
        dispatchWait: true
      });
    }
  }, [user]);
  const callback = useCallback((a0) => <EditProfileEffectRow items={a0.items} size={a0.size} selectedSkuId={a0.selectedSkuId} setSelectedProfileEffect={setSelectedProfileEffect} guildId={guildId} isTryItOut={isTryItOut} />, [setSelectedProfileEffect, guildId, isTryItOut]);
  return <>
    {[<ProfileEffectSectionPreview previewSkuId={profilePreviewValue?.skuId} user={user} guildId={guildId} />, <EditCollectiblesPreviewDetails user={user} previewSkuId={profilePreviewValue?.skuId} nitroJoinCTA={intl.string(t.pertpd)} nitroUpgradeCTA={intl.string(t["5eotIZ"])} />, <EditCollectiblesPickerList sections={profileEffectSections} selectedSkuId={selectedProfileEffect?.skuId} renderRow={callback} isFetching={stateFromStores} />]}
  </>;
};
ProfileEffectSectionPreview = function ProfileEffectSectionPreview(props) {
  const { previewSkuId, user: user2, guildId: guildId3 } = props;
  const styles = useStyles();
  const collectiblesData = useCollectiblesData(previewSkuId);
  const { product, purchase } = collectiblesData;
  return <View style={styles.previewContainer}>
    <ProfileEffectUserPreview user={user2} guildId={guildId3} profileEffect={useMemo(() => {
      let r3 = product == null ? void 0 : product.items[0];
      if (r3 == null) {
        r3 = purchase == null ? void 0 : purchase.items[0];
      }
      return isProfileEffectRecord(r3) ? r3 : null;
    }, [purchase, product])} maxWidth={250} />
    <Module4611 style={styles.previewGradient} start={{
      x: 0,
      y: 0.6
    }} end={{
      x: 0,
      y: 1
    }} colors={[`${styles.previewGradient.color}00`, styles.previewGradient.color]} />
  </View>;
};
useStyles = createStyles({
  container: {
    flex: 1,
    backgroundColor: Module712.colors.MOBILE_ACTIONSHEET_BACKGROUND
  },
  bounceOffset: {
    position: "absolute",
    top: -250,
    height: 250,
    right: 0,
    left: 0
  },
  title: {
    alignSelf: "center",
    color: Module712.colors.MOBILE_TEXT_HEADING_PRIMARY,
    margin: 25
  },
  previewContainer: {
    overflow: "hidden",
    height: 300,
    alignItems: "center"
  },
  previewGradient: {
    ...StyleSheet.absoluteFillObject,
    bottom: -1,
    color: Module712.colors.MOBILE_ACTIONSHEET_BACKGROUND
  }
});
export default function EditProfileEffectActionSheet(props) {
  const { user: user2, currentProfileEffect, guildId: guildId2, isTryItOut: isTryItOut2 } = props;
  const styles = useStyles();
  let id = user2.id;
  if (id == null) {
    id = "";
  }
  const displayProfile = useDisplayProfile(id);
  let c20668_2 = displayProfile;
  const [state, setSelectedProfileEffect2] = useState(currentProfileEffect);
  const bottomSheetRef = useBottomSheetRef().bottomSheetRef;
  const analyticsLocations = useAnalyticsLocations(AnalyticsLocation.EDIT_PROFILE_EFFECT_SHEET).analyticsLocations;
  const memo = useMemo(() => ({
    type: AnalyticsLocation.EDIT_PROFILE_EFFECT_SHEET,
    guild_id: guildId2,
    profile_has_nitro_customization: c20668_2 != null && (c20668_2 == null ? void 0 : c20668_2.hasPremiumCustomization())
  }), [guildId2, displayProfile]);
  const callback = useCallback(() => {
    AnalyticsUtils.track(AnalyticEvents.OPEN_POPOUT, {
      ...memo,
      is_fullscreen: true
    });
  }, [memo]);
  const callback2 = useCallback(() => {
    if (isTryItOut2) {
      let r18 = state;
      if (state == null) {
        r18 = null;
      }
      setTryItOutProfileEffect(r18);
    } else {
      let profileEffect = state;
      if (state == null) {
        profileEffect = null;
      }
      setPendingChanges({
        guildId: guildId2,
        profileEffect
      });
    }
  }, [state, guildId2, isTryItOut2]);
  return <AnalyticsLocationProvider value={analyticsLocations}>
    <BottomSheet scrollable ref={bottomSheetRef} onExpand={callback} startExpanded>
      <View style={styles.container}>
        <View style={styles.bounceOffset} />
        <Text variant="redesign/heading-18/bold" style={styles.title} accessibilityRole="header">
          {intl.string(t["/6nv6N"])}
        </Text>
        <EditProfileEffectInner user={user2} selectedProfileEffect={state} setSelectedProfileEffect={setSelectedProfileEffect2} guildId={guildId2} isTryItOut={isTryItOut2} />
      </View>
      <EditCollectiblesCTAButton user={user2} currentSkuId={currentProfileEffect?.skuId} selectedSkuId={state?.skuId} isTryItOut={isTryItOut2} onApply={callback2} analyticsLocations={analyticsLocations} analyticsSource={AnalyticsLocation.EDIT_PROFILE_EFFECT_SHEET} />
    </BottomSheet>
  </AnalyticsLocationProvider>;
};