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

// Metro module 13726 (f13727).
import { useEffect, useCallback, useMemo, useState } from "react";
import { View, StyleSheet } from "react-native";
import CollectiblesPurchaseStore from "../../collectibles/CollectiblesPurchaseStore";
import { isProfileFrameRecord } from "../../collectibles/records/ProfileFrameRecord";
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 { setPendingChanges } from "../UserProfileSettingsActionCreators";
import { BottomSheet } from "../../../design/components/Sheet/native/BottomSheet.native";
import { Heading } 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 useProfileFrameSections from "../../collectibles/profile_frames/hooks/useProfileFrameSections";
import { getProfilePreviewValue } from "../../profile_customization/ProfileCustomizationUtils";
import maybeFetchUserProfile from "../maybeFetchUserProfile";
import { EditProfileFrameRow } from "../../collectibles/profile_frames/native/EditProfileFrameSection";
import EditCollectiblesPreviewDetails from "./EditCollectiblesPreviewDetails";
import { EditCollectiblesPickerList } from "../../collectibles/native/EditCollectiblesPickerList";
import useCollectiblesData from "../../collectibles/hooks/useCollectiblesData";
import ProfileFrameUserPreview from "../../collectibles/profile_frames/native/previews/ProfileFrameUserPreview";
import Module4611 from "../../../_bundle/Module4611";
let useStyles, ProfileFrameSectionPreview;
const EditProfileFrameInner = function EditProfileFrameInner(props) {
  const { user, selectedProfileFrame, setSelectedProfileFrame, guildId } = props;
  useGetOrFetchCollectiblesCategoriesAndPurchases();
  const stateFromStores = useStateFromStores([CollectiblesPurchaseStore], () => CollectiblesPurchaseStore.isFetching);
  const profileFrameSections = useProfileFrameSections();
  const displayProfile = useDisplayProfile(user.id, guildId);
  const profilePreviewValue = getProfilePreviewValue({
    pendingValue: selectedProfileFrame,
    userValue: displayProfile == null ? void 0 : displayProfile._userProfile?.profileFrame,
    guildValue: displayProfile == null ? void 0 : displayProfile._guildMemberProfile?.profileFrame,
    guildId
  });
  useEffect(() => {
    if (!(user == null || user.isNonUserBot())) {
      maybeFetchUserProfile(user.id, user.getAvatarURL(null, 80), {
        withMutualGuilds: true,
        dispatchWait: true
      });
    }
  }, [user]);
  const callback = useCallback((a0) => <EditProfileFrameRow items={a0.items} size={a0.size} selectedSkuId={a0.selectedSkuId} setSelectedProfileFrame={setSelectedProfileFrame} guildId={guildId} />, [setSelectedProfileFrame, guildId]);
  return <>
    {[<ProfileFrameSectionPreview previewSkuId={profilePreviewValue?.skuId} user={user} guildId={guildId} />, <EditCollectiblesPreviewDetails user={user} previewSkuId={profilePreviewValue?.skuId} nitroJoinCTA={intl.string(t["JvNv+a"])} nitroUpgradeCTA={intl.string(t.hR2psy)} />, <EditCollectiblesPickerList sections={profileFrameSections} selectedSkuId={selectedProfileFrame?.skuId} renderRow={callback} isFetching={stateFromStores} />]}
  </>;
};
ProfileFrameSectionPreview = function ProfileFrameSectionPreview(props) {
  const { previewSkuId, user: user2, guildId: guildId3 } = props;
  const styles = useStyles();
  const collectiblesData = useCollectiblesData(previewSkuId);
  const { product, purchase } = collectiblesData;
  return <View style={styles.previewContainer}>
    <ProfileFrameUserPreview user={user2} guildId={guildId3} profileFrame={useMemo(() => {
      let r3 = product == null ? void 0 : product.items[0];
      if (r3 == null) {
        r3 = purchase == null ? void 0 : purchase.items[0];
      }
      return isProfileFrameRecord(r3) ? r3 : null;
    }, [purchase, product])} maxWidth={280} />
    <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 EditProfileFrameActionSheet(props) {
  const { user: user2, currentProfileFrame, guildId: guildId2 } = props;
  const styles = useStyles();
  let id = user2.id;
  if (id == null) {
    id = "";
  }
  const displayProfile = useDisplayProfile(id);
  let c20675_1 = displayProfile;
  const [state, setSelectedProfileFrame2] = useState(currentProfileFrame);
  const bottomSheetRef = useBottomSheetRef().bottomSheetRef;
  const analyticsLocations = useAnalyticsLocations(AnalyticsLocation.EDIT_PROFILE_FRAME_SHEET).analyticsLocations;
  const memo = useMemo(() => ({
    type: AnalyticsLocation.EDIT_PROFILE_FRAME_SHEET,
    guild_id: guildId2,
    profile_has_nitro_customization: c20675_1 != null && (c20675_1 == null ? void 0 : c20675_1.hasPremiumCustomization())
  }), [guildId2, displayProfile]);
  const callback = useCallback(() => {
    AnalyticsUtils.track(AnalyticEvents.OPEN_POPOUT, {
      ...memo,
      is_fullscreen: true
    });
  }, [memo]);
  const callback2 = useCallback(() => {
    let profileFrame = state;
    if (state == null) {
      profileFrame = null;
    }
    setPendingChanges({
      guildId: guildId2,
      profileFrame
    });
  }, [state, guildId2]);
  return <AnalyticsLocationProvider value={analyticsLocations}>
    <BottomSheet scrollable ref={bottomSheetRef} onExpand={callback} startExpanded>
      <View style={styles.container}>
        <View style={styles.bounceOffset} />
        <Heading variant="redesign/heading-18/bold" style={styles.title}>
          {intl.string(t["oTSa/q"])}
        </Heading>
        <EditProfileFrameInner user={user2} selectedProfileFrame={state} setSelectedProfileFrame={setSelectedProfileFrame2} guildId={guildId2} />
      </View>
      <EditCollectiblesCTAButton user={user2} currentSkuId={currentProfileFrame?.skuId} selectedSkuId={state?.skuId} onApply={callback2} analyticsLocations={analyticsLocations} analyticsSource={AnalyticsLocation.EDIT_PROFILE_FRAME_SHEET} />
    </BottomSheet>
  </AnalyticsLocationProvider>;
};