// Metro module 13746 (f13747).
import { useRef } from "react";
import { ScrollView, View } from "react-native";
import GuildMemberStore from "../../../stores/GuildMemberStore";
import UserProfileStore from "../UserProfileStore";
import { FLOATING_UPSELL_HEIGHT } from "./Constants";
import { AnalyticsObjects, AnalyticsSections, BIO_MAX_LENGTH, DISPLAY_NAME_MAX_LENGTH, PRONOUNS_MAX_LENGTH, UpsellTypes, AnalyticsPages } from "../../../Constants";
import { PremiumUpsellTypes } from "../../premium/PremiumConstants";
import PremiumUtils from "../../../utils/PremiumUtils";
import useAnalyticsLocations, { AnalyticsLocationProvider } from "../../app_analytics/useAnalyticsLocations";
import AnalyticsLocation from "../../app_analytics/AnalyticsLocation";
import UserProfileEditBannerButton from "./UserProfileEditBannerButton";
import ActionSheetActionCreators from "../../action_sheet/native/ActionSheetActionCreators";
import * as _ProfileCustomizationUtils from "../../profile_customization/ProfileCustomizationUtils";
import { intl, t } from "../../../intl/index.native";
import { setPendingChanges } from "../UserProfileSettingsActionCreators";
import PremiumUpsellUtils from "../../../utils/native/PremiumUpsellUtils";
import UserProfileSharedStyles from "./UserProfileSharedStyles";
import UserProfileEditFormSharedStyles from "./UserProfileEditFormSharedStyles";
import useKeyboardIsOpen from "../../keyboard/native/useKeyboardIsOpen";
import useSafeAreaInsetsKeyboardAware_native from "../../safe_area/useSafeAreaInsetsKeyboardAware.native";
import Module712 from "../../../_bundle/Module712";
import useSafeAreaAvoidingInputs_native from "../../safe_area/useSafeAreaAvoidingInputs.native";
import useGuildProfileEditForm from "../../user_settings/profiles/native/useGuildProfileEditForm";
import { useStateFromStores } from "../../../_bundle/Module589";
import useDisplayProfile from "../hooks/useDisplayProfile";
import { useCustomStatusActivity } from "../../custom_status/utils/userSettingToActivity";
import useBadges from "../hooks/useBadges";
import { getPendingAvatarSrc } from "../../recent_avatars/RecentAvatarUtils";
import { useGuildActionSheetPermissions } from "../../guild_action_sheet/native/GuildActionSheetUtils";
import * as _GuildIdentitySettingsUtils from "../../guild_identity/GuildIdentitySettingsUtils";
import useProfileTheme from "../hooks/useProfileTheme";
import { useUserProfileColors } from "../hooks/native/useUserProfileColors";
import { Text } from "../../../design/components/Text/native/Text";
import { ThemeContextProvider } from "../../../_bundle/Module3901";
import EditGuildIdentityAvatar from "../../guild_identity/native/EditGuildIdentityAvatar";
import UserProfileGradientContainer from "./UserProfileGradientContainer";
import UserProfileCustomStatusBubble from "./UserProfileCustomStatusBubble";
import UserProfilePrimaryInfo from "./UserProfilePrimaryInfo";
import UserProfileEditFormTextField from "./UserProfileEditFormTextField";
import UserUtils from "../../../utils/UserUtils";
import UserProfileDisplayNameStylesEditButton from "./UserProfileDisplayNameStylesEditButton";
import UserProfileEditTheme from "./UserProfileEditTheme";
import UserProfileAvatarDecorationEditButton from "./UserProfileAvatarDecorationEditButton";
import UserProfileEffectEditButton from "./UserProfileEffectEditButton";
import UserProfileFrameEditButton from "./UserProfileFrameEditButton";
import UserProfileNameplateEditButton from "./UserProfileNameplateEditButton";
import UserProfileUpsellCard from "./UserProfileUpsellCard";
import openPremiumModal from "../../../components_native/premium/openPremiumModal";
import { PremiumFeatureCardOrder } from "../../user_settings/premium/native/PremiumFeaturesCards";
let _excluded, c9561_20;
const EditGuildProfileBanner = function EditGuildProfileBanner(props) {
  const { user, displayProfile, guildId, guildMember, guildMemberProfile, pendingAvatarSrc, pendingBanner, pendingThemeColors, disabled } = props;
  let showEditButton = PremiumUtils.canUsePremiumGuildMemberProfile(user);
  const canUsePremiumGuildMemberProfile = showEditButton;
  const analyticsLocations = useAnalyticsLocations(AnalyticsLocation.EDIT_BANNER).analyticsLocations;
  if (canUsePremiumGuildMemberProfile) {
    showEditButton = guildMember != null;
  }
  return <AnalyticsLocationProvider value={analyticsLocations}>
    <UserProfileEditBannerButton user={user} displayProfile={displayProfile} pendingBanner={pendingBanner} pendingAvatarSrc={pendingAvatarSrc} pendingThemeColors={pendingThemeColors} showProfilePreviewButton={false} showEditButton={showEditButton} onPressEdit={function onPressEdit() {
      if (canUsePremiumGuildMemberProfile) {
        ActionSheetActionCreators.openLazy(import("./ChangeBannerActionSheet"), "Change Banner", {
          user,
          analyticsLocations,
          showRemoveBanner: _ProfileCustomizationUtils.showRemoveBanner(pendingBanner, guildMemberProfile?.banner),
          removeText: intl.string(t.jHlJNS),
          onBannerChange: (a0, a1) => setPendingChanges({
            guildId,
            banner: a0,
            bannerOriginalMd5: a1
          })
        });
      } else {
        PremiumUpsellUtils.handleShowUpsellAlert({
          initialUpsellKey: UpsellTypes.PREMIUM_GUILD_PROFILE,
          analyticsLocation: {
            section: AnalyticsSections.PREMIUM_GUILD_MEMBER_PROFILE,
            object: AnalyticsObjects.EDIT_GUILD_PROFILE_BANNER
          },
          analyticsLocations,
          analyticsProperties: {
            type: PremiumUpsellTypes.PREMIUM_GUILD_IDENTITY_MODAL
          }
        });
      }
    }} editButtonAccessibilityLabel={intl.string(t["95hPAe"])} editDisabled={disabled} />
  </AnalyticsLocationProvider>;
};
_excluded = ["nick", "bio", "guild_tag"];
c9561_20 = {
  page: AnalyticsPages.USER_SETTINGS,
  section: AnalyticsSections.SETTINGS_CUSTOMIZE_PROFILE
};
export default function GuildProfileEditForm(props) {
  let analyticsLocations2;
  const currentUser = props.currentUser;
  analyticsLocations2 = void 0;
  const styles2 = UserProfileSharedStyles();
  const styles = UserProfileEditFormSharedStyles();
  const keyboardIsOpen = useKeyboardIsOpen();
  const ref = useRef(null);
  const ref4 = useRef(null);
  const ref3 = useRef(null);
  const ref2 = useRef(null);
  const insets = useSafeAreaInsetsKeyboardAware_native({
    includeKeyboardHeight: true
  }).insets;
  const PX_16 = Module712.space.PX_16;
  const onFocus = useSafeAreaAvoidingInputs_native({
    insets,
    inputs: [{
      ref: ref4,
      offset: {
        type: "toRef",
        ref: ref3,
        extraOffset: PX_16
      }
    }, {
      ref: ref3,
      offset: {
        type: "toRef",
        ref: ref2,
        extraOffset: PX_16
      }
    }, {
      ref: ref2,
      offset: {
        type: "toValue",
        value: Module712.space.PX_64
      }
    }],
    scrollViewRef: ref
  }).onFocus;
  const guildProfileEditForm = useGuildProfileEditForm();
  const { guild, errors, isDisabled } = guildProfileEditForm;
  let pendingNickname = guildProfileEditForm.pendingNickname;
  const { pendingAvatar, pendingBanner: pendingBanner2, pendingThemeColors } = guildProfileEditForm;
  let pendingPronouns = guildProfileEditForm.pendingPronouns;
  let pendingBio = guildProfileEditForm.pendingBio;
  const { pendingAvatarDecoration, pendingProfileEffect, pendingProfileFrame, pendingNameplate, pendingDisplayNameStyles } = guildProfileEditForm;
  const stateFromStores2 = useStateFromStores([GuildMemberStore], () => guild != null ? GuildMemberStore.getMember(guild.id, currentUser.id) : null);
  const stateFromStores = useStateFromStores([UserProfileStore], () => guild != null ? UserProfileStore.getGuildMemberProfile(currentUser.id, guild?.id) : null);
  const displayProfile = useDisplayProfile(currentUser.id, guild?.id);
  const customStatusActivity = useCustomStatusActivity();
  const badges = useBadges(displayProfile);
  const pendingAvatarSrc = getPendingAvatarSrc({
    userId: currentUser.id,
    image: pendingAvatar
  });
  const canEditNickname = useGuildActionSheetPermissions(guild).canEditNickname;
  const canUsePremiumGuildMemberProfile2 = PremiumUtils.canUsePremiumGuildMemberProfile(currentUser);
  const canResetThemeColors = _GuildIdentitySettingsUtils.canResetThemeColors(pendingThemeColors, stateFromStores?.themeColors);
  let r11 = canUsePremiumGuildMemberProfile2 ? !canUsePremiumGuildMemberProfile2 : !keyboardIsOpen;
  let r56 = stateFromStores2?.nick;
  if (r56 == null) {
    r56 = "";
  }
  let r141 = stateFromStores?.pronouns;
  if (r141 == null) {
    r141 = "";
  }
  let placeholder2 = displayProfile == null ? void 0 : displayProfile._userProfile.pronouns;
  if (placeholder2 == null) {
    placeholder2 = "";
  }
  if (pendingPronouns == null) {
    pendingPronouns = r141;
  }
  let r47 = stateFromStores?.bio;
  if (r47 == null) {
    r47 = "";
  }
  let placeholder = displayProfile == null ? void 0 : displayProfile._userProfile.bio;
  if (placeholder == null) {
    placeholder = "";
  }
  analyticsLocations2 = useAnalyticsLocations([AnalyticsLocation.USER_SETTINGS]).analyticsLocations;
  const profileTheme = useProfileTheme({
    user: currentUser,
    displayProfile,
    pendingThemeColors
  });
  const { theme, primaryColor, secondaryColor } = profileTheme;
  const userProfileColors = useUserProfileColors({
    theme,
    primaryColor,
    secondaryColor
  });
  const { gradientFallbackBackground, gradientSecondaryBackground, containerBackground, avatarBackground } = userProfileColors;
  const paddingBottom = insets.bottom + (r11 ? FLOATING_UPSELL_HEIGHT : 0) + Module712.space.PX_16;
  const statusStyle = {
    backgroundColor: avatarBackground
  };
  const { nick, bio, guild_tag, ...rest } = errors;
  const errorMessage3 = nick == null ? void 0 : nick[0];
  const pronouns = errors.pronouns;
  const errorMessage2 = pronouns == null ? void 0 : pronouns[0];
  const errorMessage = bio == null ? void 0 : bio[0];
  let r61 = guild_tag == null ? void 0 : guild_tag[0];
  if (guild == null) {
    return null;
  }
  const r197 = [<View style={styles.bounceOffset} />, ,];
  const r202 = [<EditGuildProfileBanner user={currentUser} displayProfile={displayProfile} guildId={guild.id} guildMember={stateFromStores2} guildMemberProfile={stateFromStores} pendingAvatarSrc={pendingAvatarSrc} pendingBanner={pendingBanner2} pendingThemeColors={pendingThemeColors} disabled={isDisabled} />, ,];
  const r218 = [guild == null ? null : <View style={[styles2.avatarBackground, styles2.avatarPosition, styles.avatarContainer, statusStyle]}>
    <EditGuildIdentityAvatar userId={currentUser.id} disabled={isDisabled ? isDisabled : !canUsePremiumGuildMemberProfile2} disableStatus={false} guildId={guild?.id} statusStyle={statusStyle} />
  </View>, ,];
  const r233 = [<UserProfileCustomStatusBubble customStatusActivity={customStatusActivity} hasCustomProfileTheme={primaryColor != null} style={styles2.customStatusBubble} emojiOnlyStyle={styles2.emojiOnlyCustomStatusBubble} editEnabled />, <UserProfilePrimaryInfo user={currentUser} displayName={pendingNickname == null ? r56 : pendingNickname} pronouns={pendingPronouns !== "" ? pendingPronouns : placeholder2} badges={badges} badgeContainerBackground={containerBackground} displayNameAccessibilityRole="header" guildId={guild.id} pendingDisplayNameStyles={pendingDisplayNameStyles} />, ,];
  const r242 = guild == null;
  let r243 = null;
  if (!r242) {
    const r248 = errorMessage != null;
    let r249 = null;
    if (!r248) {
      const r250 = errorMessage3 != null;
      r249 = null;
      if (!r250) {
        if (r61 == null) {
          r61 = Object.keys(rest).length > 0 ? intl.string(t.s35OuK) : null;
        }
        r249 = r61 == null ? null : r61 !== "" ? <View style={styles.errorContainer}>
          <Text variant="text-sm/bold" color="text-feedback-critical">{r61}</Text>
        </View> : null;
      }
    }
    const r275 = [r249, , , , , , , , , ,];
    const props2 = {
      inputRef: ref4,
      label: intl.string(t.me1lRk),
      errorMessage: errorMessage3,
      value: null,
      onFocus: null,
      onChange: null,
      placeholder: null,
      maxLength: null,
      isDisabled: null
    };
    if (pendingNickname == null) {
      pendingNickname = r56;
    }
    props2.value = pendingNickname;
    props2.onFocus = onFocus;
    props2.onChange = (a0) => setPendingChanges({
      guildId: guild.id,
      nickname: a0
    });
    props2.placeholder = UserUtils.getName(currentUser);
    props2.maxLength = DISPLAY_NAME_MAX_LENGTH;
    props2.isDisabled = canEditNickname ? isDisabled : !canEditNickname;
    r275[1] = <UserProfileEditFormTextField {...props2} />;
    r275[2] = canUsePremiumGuildMemberProfile2 && <UserProfileDisplayNameStylesEditButton user={currentUser} guildId={guild.id} />;
    r275[3] = <UserProfileEditFormTextField inputRef={ref3} label={intl.string(t["+T3RI/"])} errorMessage={errorMessage2} description={intl.string(t.NZqtIp)} value={pendingPronouns} onFocus={onFocus} onChange={(event) => setPendingChanges({
      guildId: guild.id,
      pronouns: event
    })} placeholder={placeholder2} maxLength={PRONOUNS_MAX_LENGTH} isDisabled={isDisabled} />;
    let r325 = null;
    if (canUsePremiumGuildMemberProfile2) {
      const props3 = {
        inputRef: ref2,
        label: intl.string(t.ZzAR2Y),
        errorMessage,
        description: intl.string(t.S5O8U2),
        value: null,
        onFocus: null,
        onChange: null,
        placeholder: null,
        maxLength: null,
        numberOfLines: 5,
        isDisabled: null
      };
      if (pendingBio == null) {
        pendingBio = r47;
      }
      props3.value = pendingBio;
      props3.onFocus = onFocus;
      props3.onChange = (a0) => setPendingChanges({
        guildId: guild.id,
        bio: a0
      });
      props3.placeholder = placeholder;
      props3.maxLength = BIO_MAX_LENGTH;
      props3.isDisabled = isDisabled;
      r325 = <UserProfileEditFormTextField {...props3} />;
    }
    r275[4] = r325;
    r275[5] = <UserProfileEditTheme pendingAvatarSrc={pendingAvatarSrc} pendingThemeColors={pendingThemeColors} user={currentUser} guildId={guild.id} onProfileThemeColorsChanged={(event) => setPendingChanges({
      guildId: guild.id,
      themeColors: event
    })} showResetMenu={canResetThemeColors} />;
    r275[6] = <UserProfileAvatarDecorationEditButton user={currentUser} guildId={guild.id} pendingAvatarDecoration={pendingAvatarDecoration} />;
    r275[7] = <UserProfileEffectEditButton user={currentUser} guildId={guild.id} pendingProfileEffect={pendingProfileEffect} displayProfile={displayProfile} />;
    r275[8] = <UserProfileFrameEditButton user={currentUser} guildId={guild.id} pendingProfileFrame={pendingProfileFrame} displayProfile={displayProfile} />;
    r275[9] = <UserProfileNameplateEditButton user={currentUser} pendingNameplate={pendingNameplate} guildId={guild.id} />;
    r243 = <View style={[styles.formContainer, {
      backgroundColor: containerBackground,
      paddingBottom: 20
    }]}>{r275}</View>;
  }
  r233[2] = r243;
  r218[1] = <UserProfileGradientContainer fallbackBackground={gradientFallbackBackground} primaryColor={primaryColor} secondaryColor={secondaryColor} containerStyle={[styles2.profileContentWrapper, styles2.profileContent, {
    paddingTop: 0,
    paddingBottom
  }]}>{r233}</UserProfileGradientContainer>;
  r202[1] = <View>{r218}</View>;
  r197[1] = <View style={{
    backgroundColor: gradientSecondaryBackground
  }}>{r202}</View>;
  const r380 = [<ScrollView ref={ref}>{r197}</ScrollView>, ,];
  if (r11) {
    r11 = <UserProfileUpsellCard style={[styles.floatingUpsell, {
      bottom: Module712.space.PX_16 + insets.bottom
    }]} ctaText={intl.string(t.pj0XBN)} onPress={function onPress() {
      openPremiumModal({
        analyticsLocation: {
          ...c9561_20,
          object: AnalyticsObjects.BUTTON_CTA
        },
        analyticsLocations: analyticsLocations2,
        premiumFeatureCardOrder: PremiumFeatureCardOrder.TIER_2_LEADING
      });
    }}>
      <Text variant="text-sm/normal">
        {intl.string(t.YIZS5B)}
      </Text>
    </UserProfileUpsellCard>;
  }
  r380[1] = r11;
  return <ThemeContextProvider theme={theme} primaryColor={primaryColor} secondaryColor={secondaryColor}>
    <View style={[styles.container, {
      backgroundColor: gradientSecondaryBackground
    }]}>{r380}</View>
  </ThemeContextProvider>;
};