// Metro module 16260 (f16261).
import { useState, useMemo } from "react";
import { View } from "react-native";
import UserProfileSettingsStore from "../../../user_profile/UserProfileSettingsStore";
import * as _Constants from "../../../../Constants";
import { UPLOAD_MEDIUM_SIZE } from "../../../../Constants";
import { createStyles } from "../../../../design/components/Styles/native/createStyles";
import Module712 from "../../../../_bundle/Module712";
import { NAV_BAR_HEIGHT } from "../../../../design/components/Navigator/native/NavigatorConstants.native";
import TextStyles from "../../../rebrand/native/TextStyles";
import useSafeAreaInsets_native from "../../../safe_area/useSafeAreaInsets.native";
import { useStateFromStores } from "../../../../_bundle/Module589";
import { createPendingImage, generateAvatarDescription } from "../../../recent_avatars/RecentAvatarUtils";
import PresetAvatarSelect, { DEFAULT_AVATARS } from "./PresetAvatarSelect";
import { memoizedImageSource } from "../../../calls/native/VideoBackground";
import { openImagePicker, base64GIFRegex } from "../../../../utils/native/UploadUtils";
import { setPendingChanges } from "../../../user_profile/UserProfileSettingsActionCreators";
import { announcePendingAvatarChange } from "../../../profile_customization/ProfileCustomizationUtils";
import { Text } from "../../../../design/components/Text/native/Text";
import { intl, t } from "../../../../intl/index.native";
import TouchableUploadAvatar from "./TouchableUploadAvatar";
import { LegacyText } from "../../../../design/void/native";
import { Button } from "../../../../design/components/Button/native/Button.native";
import { handlePressNext, showSkipAvatarModal } from "../AddAvatarModalActionCreators";
import { ImpressionNames } from "../../../../_bundle/Module503";
import { HeaderActionButton } from "../../../../design/components/Navigator/native/HeaderActionButton.native";
import { getHeaderNoTitle } from "../../../../design/components/Navigator/native/NavigatorHeader.native";
import { Navigator } from "../../../../design/components/Navigator/native/Navigator.native";
let useStyles;
const AddAvatarScreen = function AddAvatarScreen() {
  let stateFromStores;
  let _handleSelectAvatar2 = function _handleSelectAvatar() {
    const r9 = async () => {
      let c31011_1;
      let c31805_0, c31805_1;
      L13: {
        c31011_1 = void 0;
        c31805_0 = void 0;
        c31805_1 = void 0;
        setState(false);
        c31805_0 = (await openImagePicker({
          size: UPLOAD_MEDIUM_SIZE
        })).base64;
        if (c31805_0 != null) {
          if (c31805_0.match(base64GIFRegex) != null) {
            (0, setState)(true);
            break L13;
          }
        }
        c31805_1 = c31805_0 != null ? createPendingImage({
          imageUri: c31805_0,
          description: generateAvatarDescription()
        }) : void 0;
        setPendingChanges({
          avatar: c31805_1
        });
        announcePendingAvatarChange(c31805_1 == null ? "remove" : "set");
        (0, setState2)(void 0);
      }
    };
    _handleSelectAvatar2 = r9;
    return r9.apply(this, arguments);
  };
  const styles = useStyles();
  let [state2, setState] = useState(false);
  const [state, setState2] = useState();
  const bottom = useSafeAreaInsets_native().bottom;
  const stateFromStores2 = useStateFromStores([UserProfileSettingsStore], () => UserProfileSettingsStore.getPendingChanges().pendingAvatar);
  let r12 = state != null ? createPendingImage({
    imageUri: DEFAULT_AVATARS[state],
    description: generateAvatarDescription()
  }) : void 0;
  if (r12 == null) {
    r12 = stateFromStores2;
  }
  stateFromStores = r12;
  const avatarSource = memoizedImageSource(stateFromStores?.imageUri);
  const style = [styles.container, {
    paddingBottom: bottom > 0 ? bottom : 16
  }];
  const r100 = [<View>
    <Text style={styles.title} accessibilityRole="header" variant="heading-xl/extrabold" color="mobile-text-heading-primary">
      {intl.string(t.XQRWvR)}
    </Text>
    <Text style={styles.subtitle} variant="heading-deprecated-12/medium" color="text-default">
      {intl.string(t.fH9TLT)}
    </Text>
  </View>, <TouchableUploadAvatar avatarSource={avatarSource} showPendingAvatar={stateFromStores != null} onSelectAvatar={function handleSelectAvatar() {
    return _handleSelectAvatar2.apply(this, arguments);
  }} />, ,];
  if (state2) {
    state2 = intl.string(t.XyLlVm);
  }
  r100[2] = <View style={styles.errorContainer}>
    <LegacyText style={styles.errorText}>{state2}</LegacyText>
  </View>;
  return <View style={style}>
    <View style={styles.headerContainer}>{r100}</View>
    <PresetAvatarSelect onAvatarSelect={setState2} selectedAvatar={state} />
    <View style={styles.buttonContainer}>
      <Button text={intl.string(t.PDTjLN)} grow onPress={() => handlePressNext(stateFromStores, state)} disabled={stateFromStores == null} />
    </View>
  </View>;
};
const AddAvatarModal = function AddAvatarModal() {
  return <Navigator screens={useMemo(() => ({
    ADD_AVATAR: {
      impressionName: ImpressionNames.AVATAR_UPLOAD,
      headerRight: () => <HeaderActionButton text={intl.string(t["5Wxrcd"])} onPress={() => showSkipAvatarModal()} />,
      headerLeft: () => null,
      headerTitle: getHeaderNoTitle(),
      ignoreKeyboard: true,
      fullscreen: true,
      render: () => <AddAvatarScreen />
    }
  }), [])} initialRouteName="ADD_AVATAR" />;
};
const { Fonts, ModalAnimation } = _Constants;
useStyles = createStyles({
  container: {
    flex: 1,
    backgroundColor: Module712.colors.BACKGROUND_BASE_LOW,
    justifyContent: "center",
    paddingTop: NAV_BAR_HEIGHT + 32,
    alignItems: "center"
  },
  headerContainer: {
    display: "flex",
    alignItems: "center"
  },
  buttonContainer: {
    marginHorizontal: 16,
    marginBottom: 16
  },
  title: {
    marginBottom: 8,
    textAlign: "center"
  },
  subtitle: {
    textAlign: "center"
  },
  errorContainer: {
    alignSelf: "center",
    paddingTop: 24
  },
  errorText: {
    ...TextStyles(Fonts.DISPLAY_MEDIUM, Module712.unsafe_rawColors.RED_400, 12)
  }
});
AddAvatarModal.modalConfig = {
  animation: ModalAnimation.SLIDE_IN_OUT
};
export default AddAvatarModal;