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

// Metro module 13731 (f13732).
import { useCallback, useMemo, useState } from "react";
import { View } from "react-native";
import CollectiblesPurchaseStore from "../../collectibles/CollectiblesPurchaseStore";
import { isNameplateRecord } from "../../collectibles/records/NameplateRecord";
import GuildMemberStore from "../../../stores/GuildMemberStore";
import { AnalyticEvents } from "../../../Constants";
import { createStyles } from "../../../design/components/Styles/native/createStyles";
import Module712 from "../../../_bundle/Module712";
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 { 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 useNameplateSections from "../../collectibles/nameplates/useNameplateSections";
import { getProfilePreviewValue } from "../../profile_customization/ProfileCustomizationUtils";
import { EditNameplateRow } from "../../collectibles/nameplates/native/EditNameplateSection";
import EditCollectiblesPreviewDetails from "./EditCollectiblesPreviewDetails";
import { EditCollectiblesPickerList } from "../../collectibles/native/EditCollectiblesPickerList";
import useCollectiblesData from "../../collectibles/hooks/useCollectiblesData";
import { NameplateDummyUserPreview } from "../../collectibles/nameplates/native/NameplateDummyUserPreview";
import Module4611 from "../../../_bundle/Module4611";
import { NameplatePreview } from "../../collectibles/nameplates/native/NameplatePreview";
let useStyles, NameplateActionSheetPreview;
const EditNameplateInner = function EditNameplateInner(props) {
  const { user, selectedNameplate, setSelectedNameplate, guildId } = props;
  useGetOrFetchCollectiblesCategoriesAndPurchases();
  const stateFromStores2 = useStateFromStores([CollectiblesPurchaseStore], () => CollectiblesPurchaseStore.isFetching);
  const nameplateSections = useNameplateSections();
  const stateFromStores = useStateFromStores([GuildMemberStore], () => guildId != null ? GuildMemberStore.getMember(guildId, user.id) : null);
  const profilePreviewValue = getProfilePreviewValue({
    pendingValue: selectedNameplate,
    userValue: user == null ? void 0 : user.collectibles?.nameplate,
    guildValue: stateFromStores == null ? void 0 : stateFromStores.collectibles?.nameplate,
    guildId
  });
  const callback = useCallback((a0) => <EditNameplateRow items={a0.items} size={a0.size} selectedSkuId={a0.selectedSkuId} setSelectedNameplate={setSelectedNameplate} guildId={guildId} />, [setSelectedNameplate, guildId]);
  return <>
    {[<NameplateActionSheetPreview previewSkuId={profilePreviewValue?.skuId} user={user} guildId={guildId} />, <EditCollectiblesPreviewDetails user={user} previewSkuId={profilePreviewValue?.skuId} nitroJoinCTA={intl.string(t["V+IE93"])} nitroUpgradeCTA={intl.string(t.a6SrkR)} />, <EditCollectiblesPickerList sections={nameplateSections} selectedSkuId={selectedNameplate?.skuId} renderRow={callback} isFetching={stateFromStores2} />]}
  </>;
};
NameplateActionSheetPreview = function NameplateActionSheetPreview(props) {
  const { previewSkuId, user: user2, guildId: guildId3 } = 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 isNameplateRecord(r3) ? r3 : null;
  }, [purchase, product]);
  return <View style={styles.nameplatePreviewContainer} accessibilityLabel={memo != null ? intl.formatToPlainString(t.YJig7C, {
    a11y_text: memo.label
  }) : intl.string(t.aqlsGS)} accessibilityRole="image" accessible>
    <View style={styles.nameplateGradientContainer}>
      <NameplateDummyUserPreview width={100} />
      <NameplateDummyUserPreview width={140} />
      <Module4611 style={styles.nameplatePreviewGradient} start={{
        x: 0,
        y: 0.1
      }} end={{
        x: 0,
        y: 0.8
      }} colors={[styles.nameplatePreviewGradient.color, `${styles.nameplatePreviewGradient.color}00`]} />
    </View>
    <NameplatePreview nameplate={memo} user={user2} guildId={guildId3} animate aria-hidden />
    <View style={styles.nameplateGradientContainer}>
      <NameplateDummyUserPreview width={140} />
      <NameplateDummyUserPreview width={100} />
      <Module4611 style={styles.nameplatePreviewGradient} start={{
        x: 0,
        y: 0.2
      }} end={{
        x: 0,
        y: 0.9
      }} colors={[`${styles.nameplatePreviewGradient.color}00`, styles.nameplatePreviewGradient.color]} />
    </View>
  </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
  },
  nameplatePreviewContainer: {
    width: "80%",
    alignSelf: "center",
    justifyContent: "center",
    alignItems: "center"
  },
  nameplateGradientContainer: {
    width: "100%"
  },
  nameplatePreviewGradient: {
    position: "absolute",
    width: "100%",
    height: "100%",
    color: Module712.colors.MOBILE_ACTIONSHEET_BACKGROUND
  }
});
export default function EditNameplateActionSheet(props) {
  const { user: user2, currentNameplate, guildId: guildId2 } = props;
  const styles = useStyles();
  const bottomSheetRef = useBottomSheetRef().bottomSheetRef;
  const [state, setSelectedNameplate2] = useState(void 0);
  const selectedNameplate = state !== void 0 ? state : currentNameplate;
  const analyticsLocations = useAnalyticsLocations(AnalyticsLocation.EDIT_NAMEPLATE_SHEET).analyticsLocations;
  const callback = useCallback(() => {
    AnalyticsUtils.track(AnalyticEvents.OPEN_POPOUT, {
      type: AnalyticsLocation.EDIT_NAMEPLATE_SHEET,
      is_fullscreen: true
    });
  }, []);
  const callback2 = useCallback(() => {
    let nameplate = state;
    if (state == null) {
      nameplate = null;
    }
    setPendingChanges({
      guildId: guildId2,
      nameplate
    });
  }, [state, guildId2]);
  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.BwdeM1)}
        </Text>
        <EditNameplateInner user={user2} selectedNameplate={selectedNameplate} setSelectedNameplate={setSelectedNameplate2} guildId={guildId2} />
      </View>
      <EditCollectiblesCTAButton user={user2} currentSkuId={currentNameplate?.skuId} selectedSkuId={selectedNameplate?.skuId} onApply={callback2} analyticsLocations={analyticsLocations} analyticsSource={AnalyticsLocation.EDIT_NAMEPLATE_SHEET} />
    </BottomSheet>
  </AnalyticsLocationProvider>;
};