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

// Metro module 7936 (f7937).
import { useCallback, useMemo, useState } from "react";
import { View } from "react-native";
import CollectiblesPurchaseStore from "../../collectibles/CollectiblesPurchaseStore";
import { isAvatarDecorationRecord } from "../../collectibles/records/AvatarDecorationRecord";
import GuildMemberStore from "../../../stores/GuildMemberStore";
import { AnalyticEvents } from "../../../Constants";
import { createStyles } from "../../../design/components/Styles/native/createStyles";
import Module712 from "../../../_bundle/Module712";
import usePendingAvatarSettings from "../hooks/usePendingAvatarSettings";
import { getPendingAvatarSrc } from "../../recent_avatars/RecentAvatarUtils";
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 { ThemeContextProvider } from "../../../_bundle/Module3901";
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 useAvatarDecorationSections from "../../collectibles/avatar_decorations/useAvatarDecorationSections";
import { getProfilePreviewValue } from "../../profile_customization/ProfileCustomizationUtils";
import { EditAvatarDecorationRow } from "../../collectibles/avatar_decorations/native/EditAvatarDecorationSection";
import EditCollectiblesPreviewDetails from "./EditCollectiblesPreviewDetails";
import { EditCollectiblesPickerList } from "../../collectibles/native/EditCollectiblesPickerList";
import useCollectiblesData from "../../collectibles/hooks/useCollectiblesData";
import HeaderAvatar from "../../profile_customization/native/HeaderAvatar";
import { AvatarSizes } from "../../../design/void/native";
import AvatarGrid from "../../collectibles/avatar_decorations/native/AvatarGrid";
let useStyles, AvatarDecorationSectionPreview;
const EditAvatarDecorationInner = function EditAvatarDecorationInner(props) {
  const { pendingAvatarSrc, user, selectedAvatarDecoration, setSelectedAvatarDecoration, guildId, isTryItOut: isTryItOut2 = false } = props;
  const isTryItOut = isTryItOut2;
  useGetOrFetchCollectiblesCategoriesAndPurchases();
  const stateFromStores = useStateFromStores([CollectiblesPurchaseStore], () => CollectiblesPurchaseStore.isFetching);
  const avatarDecorationSections = useAvatarDecorationSections();
  const profilePreviewValue = getProfilePreviewValue({
    pendingValue: selectedAvatarDecoration,
    userValue: user?.avatarDecoration,
    guildValue: useStateFromStores([GuildMemberStore], () => guildId != null ? GuildMemberStore.getMember(guildId, user.id) : null)?.avatarDecoration,
    guildId
  });
  const callback = useCallback((a0) => <EditAvatarDecorationRow items={a0.items} size={a0.size} selectedSkuId={a0.selectedSkuId} setSelectedAvatarDecoration={setSelectedAvatarDecoration} guildId={guildId} isTryItOut={isTryItOut} />, [setSelectedAvatarDecoration, guildId, isTryItOut]);
  return <>
    {[<AvatarDecorationSectionPreview previewSkuId={profilePreviewValue?.skuId} user={user} guildId={guildId} pendingAvatarSrc={pendingAvatarSrc} />, <EditCollectiblesPreviewDetails user={user} previewSkuId={profilePreviewValue?.skuId} nitroJoinCTA={intl.string(t.FyBDiY)} nitroUpgradeCTA={intl.string(t.e1UiOa)} />, <EditCollectiblesPickerList sections={avatarDecorationSections} selectedSkuId={selectedAvatarDecoration?.skuId} renderRow={callback} isFetching={stateFromStores} />]}
  </>;
};
AvatarDecorationSectionPreview = function AvatarDecorationSectionPreview(props) {
  const { previewSkuId, user: user2, guildId: guildId2, pendingAvatarSrc } = props;
  const styles = useStyles();
  const collectiblesData = useCollectiblesData(previewSkuId);
  const { product, purchase } = collectiblesData;
  const memo = useMemo(() => {
    let r3 = product == null ? void 0 : product.items[0];
    if (r3 == null) {
      r3 = purchase == null ? void 0 : purchase.items[0];
    }
    return isAvatarDecorationRecord(r3) ? r3 : null;
  }, [purchase, product]);
  return <View style={styles.avatarDisplayContainer} accessibilityLabel={memo != null ? intl.formatToPlainString(t.Do2lxE, {
    a11y_text: memo.label
  }) : intl.string(t["7hRBmC"])} accessibilityRole="image" accessible>
    <HeaderAvatar user={user2} guildId={guildId2} pendingAvatarSrc={pendingAvatarSrc} pendingAvatarDecoration={memo} size={AvatarSizes.EDIT_AVATAR_DECORATION} />
    <AvatarGrid user={user2} guildId={guildId2} pendingAvatarSrc={pendingAvatarSrc} pendingAvatarDecoration={memo} />
  </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
  },
  avatarDisplayContainer: {
    flexDirection: "row",
    width: "100%",
    justifyContent: "center",
    alignItems: "center",
    paddingVertical: 16
  }
});
export default function EditAvatarDecorationActionSheet(props) {
  const { user: user2, guildId: guildId2, currentAvatarDecoration, isTryItOut: isTryItOut2 } = props;
  let analyticsLocations = props.analyticsLocations;
  const styles = useStyles();
  const pendingAvatarSettings = usePendingAvatarSettings({
    analyticsLocations,
    isTryItOut: isTryItOut2,
    guildId: guildId2
  });
  const { pendingAvatar, setPendingAvatarDecoration } = pendingAvatarSettings;
  const pendingAvatarSrc = getPendingAvatarSrc({
    userId: user2.id,
    image: pendingAvatar
  });
  const [state, setSelectedAvatarDecoration2] = useState(currentAvatarDecoration);
  const bottomSheetRef = useBottomSheetRef().bottomSheetRef;
  if (analyticsLocations == null) {
    analyticsLocations = [];
  }
  const analyticsLocations2 = useAnalyticsLocations(analyticsLocations, AnalyticsLocation.EDIT_AVATAR_DECORATION_SHEET).analyticsLocations;
  const callback = useCallback(() => {
    AnalyticsUtils.track(AnalyticEvents.OPEN_POPOUT, {
      type: AnalyticsLocation.EDIT_AVATAR_DECORATION_SHEET,
      is_fullscreen: true
    });
  }, []);
  const callback2 = useCallback(() => {
    let r3 = state;
    if (state == null) {
      r3 = null;
    }
    setPendingAvatarDecoration(r3);
  }, [state, setPendingAvatarDecoration]);
  return <ThemeContextProvider>
    <AnalyticsLocationProvider value={analyticsLocations2}>
      <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.HykynS)}
          </Text>
          <EditAvatarDecorationInner user={user2} guildId={guildId2} pendingAvatarSrc={pendingAvatarSrc} selectedAvatarDecoration={state} setSelectedAvatarDecoration={setSelectedAvatarDecoration2} isTryItOut={isTryItOut2} />
        </View>
        <EditCollectiblesCTAButton user={user2} currentSkuId={currentAvatarDecoration?.skuId} selectedSkuId={state?.skuId} isTryItOut={isTryItOut2} onApply={callback2} analyticsLocations={analyticsLocations2} analyticsSource={AnalyticsLocation.EDIT_AVATAR_DECORATION_SHEET} />
      </BottomSheet>
    </AnalyticsLocationProvider>
  </ThemeContextProvider>;
};