// Metro module 9186 (f9187).
import { useState, useCallback } from "react";
import { Image as Image2, ScrollView, View } from "react-native";
import UserStore from "../../../../stores/UserStore";
import { createStyles } from "../../../../design/components/Styles/native/createStyles";
import { useNavigation } from "../../../../design/components/Navigator/native/useNavigation.native";
import { useStateFromStores } from "../../../../_bundle/Module589";
import { sendConfirmationCode } from "../../ChangeEmailActionCreators";
import { VerificationModalScenes } from "../../../../ConstantsIOS";
import APIError from "../../../../errors/APIError";
import ToastActionCreators from "../../../toast/native/ToastActionCreators";
import { intl, t } from "../../../../intl/index.native";
import Module9188 from "../../../../_bundle/Module9188";
import { Text } from "../../../../design/components/Text/native/Text";
import { Button } from "../../../../design/components/Button/native/Button.native";
const useStyles = createStyles({
  container: {
    flex: 1,
    padding: 16,
    alignItems: "center",
    justifyContent: "center"
  },
  image: {
    height: 190,
    width: 220,
    resizeMode: "contain"
  },
  title: {
    marginTop: 16,
    textAlign: "center"
  },
  body: {
    marginTop: 8,
    lineHeight: 18,
    textAlign: "center"
  },
  button: {
    marginTop: 16,
    width: "100%"
  }
});
export default function ConfirmEmailChangeStart() {
  const styles = useStyles();
  const navigation = useNavigation();
  const stateFromStores = useStateFromStores([UserStore], () => UserStore.getCurrentUser());
  const [loading, setState] = useState(false);
  const callback = useCallback(async () => {
    let c26384_2;
    let c26384_3 = 0;
    let c30053_0, c30053_1;
    L10: {
      try {
        c30053_0 = void 0;
        setState(true);
        c26384_3 = 2;
        await sendConfirmationCode();
        navigation.push(VerificationModalScenes.CONFIRM_EMAIL_CHANGE_CODE);
        c26384_3 = 1;
        c26384_3 = 0;
        (0, setState)(false);
      } catch ($e) {
        const r27 = $e;
        let r7 = r27;
        c26384_2 = r27;
        let r28 = c26384_3;
        if (r28 !== 0) {
          while (true) {
            if (r28 === 1) {
              try {
                const r107 = c26384_2;
                c26384_3 = 0;
                (0, setState)(false);
                throw r107;
              } catch (r105) {
                r7 = r105;
                c26384_2 = r105;
                r28 = c26384_3;
                if (r28 === 0) {
                  break;
                }
              }
            } else {
              try {
                const r75 = c26384_2;
                c26384_3 = 1;
                c30053_1 = r75;
                c30053_0 = new APIError(c30053_1).getAnyErrorMessage();
                if (c30053_0 != null) {
                  ToastActionCreators.open({
                    key: "CONFIRM_EMAIL_ERROR",
                    content: c30053_0
                  });
                }
                c26384_3 = 0;
                (0, setState)(false);
                break L10;
              } catch (r72) {
                r7 = r72;
                c26384_2 = r72;
                r28 = c26384_3;
                if (r28 === 0) {
                  break;
                }
              }
            }
          }
        }
        throw r7;
      }
    }
  }, [navigation]);
  if (stateFromStores == null) {
    return null;
  }
  const r16 = intl.format(t.oMFSgi, {
    oldEmail: stateFromStores.email
  });
  return <ScrollView keyboardShouldPersistTaps="handled" alwaysBounceVertical={false}>
    <View style={styles.container}>
      <Image2 style={styles.image} source={Module9188} />
      <Text style={styles.title} accessibilityRole="header" variant="heading-xl/extrabold" color="mobile-text-heading-primary">
        {intl.string(t.dQ71Wa)}
      </Text>
      {r16.map((item, index) => <Text key={index} style={styles.body} variant="text-sm/medium" color="text-default">
        {item}
      </Text>)}
      <View style={styles.button}>
        <Button text={intl.string(t.rXV81H)} onPress={callback} loading={loading} grow />
      </View>
    </View>
  </ScrollView>;
};