// Metro module 16276 (f16277).
import { useState } from "react";
import { ScrollView, View } from "react-native";
import UserProfileSettingsStore from "../../../user_profile/UserProfileSettingsStore";
import { UPLOAD_MEDIUM_SIZE } from "../../../../Constants";
import { createStyles } from "../../../../design/components/Styles/native/createStyles";
import Module712 from "../../../../_bundle/Module712";
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 { Button } from "../../../../design/components/Button/native/Button.native";
import { handlePressNext } from "../AddAvatarModalActionCreators";
const useStyles = createStyles({
  container: {
    flex: 1,
    backgroundColor: Module712.colors.BACKGROUND_BASE_LOW
  },
  contentContainer: {
    flexGrow: 2,
    alignItems: "center"
  },
  growContainer: {
    flexGrow: 2,
    minHeight: Module712.space.PX_24
  },
  headerContainer: {
    display: "flex",
    alignItems: "center"
  },
  buttonContainer: {
    width: "100%"
  },
  title: {
    marginBottom: Module712.space.PX_8,
    textAlign: "center"
  },
  subtitle: {
    textAlign: "center"
  },
  errorContainer: {
    alignSelf: "center",
    paddingTop: Module712.space.PX_24
  }
});
export default function RedesignAddAvatarModal(props) {
  let setState, state, setState2, stateFromStores;
  const onComplete = props.route.params.onComplete;
  setState = void 0;
  state = void 0;
  setState2 = void 0;
  stateFromStores = void 0;
  let _handleSelectAvatar2 = function _handleSelectAvatar() {
    const r9 = async () => {
      let c31013_1;
      let c31807_0, c31807_1;
      L13: {
        c31013_1 = void 0;
        c31807_0 = void 0;
        c31807_1 = void 0;
        setState(false);
        c31807_0 = (await openImagePicker({
          size: UPLOAD_MEDIUM_SIZE
        })).base64;
        if (c31807_0 != null) {
          if (c31807_0.match(base64GIFRegex) != null) {
            (0, setState)(true);
            break L13;
          }
        }
        c31807_1 = c31807_0 != null ? createPendingImage({
          imageUri: c31807_0,
          description: generateAvatarDescription()
        }) : void 0;
        setPendingChanges({
          avatar: c31807_1
        });
        announcePendingAvatarChange(c31807_1 == null ? "remove" : "set");
        (0, setState2)(void 0);
      }
    };
    _handleSelectAvatar2 = r9;
    return r9.apply(this, arguments);
  };
  const styles = useStyles();
  let state2;
  [state2, setState] = useState(false);
  [state, setState2] = useState();
  const bottom = useSafeAreaInsets_native().bottom;
  const stateFromStores2 = useStateFromStores([UserProfileSettingsStore], () => UserProfileSettingsStore.getPendingChanges().pendingAvatar);
  let r13 = state != null ? createPendingImage({
    imageUri: DEFAULT_AVATARS[state],
    description: generateAvatarDescription()
  }) : void 0;
  if (r13 == null) {
    r13 = stateFromStores2;
  }
  stateFromStores = r13;
  const avatarSource = memoizedImageSource(stateFromStores?.imageUri);
  const r112 = [<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="text-sm/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 = <Text variant="text-sm/medium" color="text-feedback-critical">
      {intl.string(t.XyLlVm)}
    </Text>;
  }
  r112[2] = <View style={styles.errorContainer}>{state2}</View>;
  return <ScrollView style={styles.container} alwaysBounceVertical={false} contentContainerStyle={[styles.contentContainer, {
    paddingBottom: bottom + Module712.space.PX_16,
    paddingHorizontal: Module712.space.PX_16
  }]}>
    <View style={styles.headerContainer}>{r112}</View>
    <PresetAvatarSelect onAvatarSelect={setState2} selectedAvatar={state} />
    <View style={styles.growContainer} />
    <View style={styles.buttonContainer}>
      <Button variant="primary" size="lg" text={intl.string(t.PDTjLN)} onPress={() => {
        let r11 = onComplete;
        if (onComplete == null) {
          r11 = () => {};
        }
        return handlePressNext(stateFromStores, state, r11);
      }} disabled={stateFromStores == null} />
    </View>
  </ScrollView>;
};