// Metro module 13769 (f13770).
import { useState, useCallback, useMemo } from "react";
import { View } from "react-native";
import { WebAuthnScreens } from "../../WebAuthnConstants";
import { createStyles } from "../../../../design/components/Styles/native/createStyles";
import Module712 from "../../../../_bundle/Module712";
import NativeCeremonies from "../NativeCeremonies";
import { intl, t } from "../../../../intl/index.native";
import { RadioGroup } from "../../../../design/void/native";
import { useNavigation } from "../../../../design/components/Navigator/native/useNavigation.native";
import { isAndroid } from "../../../../utils/PlatformUtils";
import { SafeAreaPaddingView } from "../../../../components_native/common/SafeAreaView";
import { KeyImage } from "../../../mfa/native/components/KeyImage";
import { Text } from "../../../../design/components/Text/native/Text";
import { ButtonGroup } from "../../../../design/components/ButtonGroup/native/ButtonGroup.native";
import { Button } from "../../../../design/components/Button/native/Button.native";
let useStyles, c9579_10, c9579_11;
const AndroidPasskeyRadioGroup = function AndroidPasskeyRadioGroup(props) {
  const { authenticatorSelection, onChange: onChange2, registering } = props;
  return <RadioGroup style={useStyles().radioItem} options={[{
    value: c9579_10.PASSKEY_CREDENTIAL_MANAGER,
    name: intl.string(t.JQbo8L)
  }, {
    value: c9579_10.PASSKEY_DEVICE,
    name: intl.string(t.GjBNMg)
  }, {
    value: c9579_10.OTHER_AND_ANDROID_NONDISCOVERABLE,
    name: intl.string(t["OhC77+"])
  }]} onChange={(event) => onChange2(event.value)} value={authenticatorSelection} disabled={registering} size={RadioGroup.Sizes.LARGE} withSpacing />;
};
useStyles = createStyles({
  flexContainer: {
    flex: 1,
    flexDirection: "column",
    alignItems: "stretch",
    justifyContent: "space-between",
    marginLeft: 16,
    marginRight: 16,
    marginTop: 16
  },
  centerFlex: {
    display: "flex",
    alignItems: "center"
  },
  margin: {
    marginTop: 16,
    textAlign: "center"
  },
  radioItem: {
    backgroundColor: Module712.colors.BACKGROUND_SURFACE_HIGH,
    borderRadius: Module712.radii.md
  }
});
c9579_10 = {
  PASSKEY_CREDENTIAL_MANAGER: 0,
  0: "PASSKEY_CREDENTIAL_MANAGER",
  PASSKEY_DEVICE: 1,
  1: "PASSKEY_DEVICE",
  OTHER_AND_ANDROID_NONDISCOVERABLE: 2,
  2: "OTHER_AND_ANDROID_NONDISCOVERABLE"
};
const r52 = {};
r52[c9579_10.PASSKEY_CREDENTIAL_MANAGER] = NativeCeremonies.registerPasskey;
r52[c9579_10.PASSKEY_DEVICE] = NativeCeremonies.registerAndroidDevicePasskey;
r52[c9579_10.OTHER_AND_ANDROID_NONDISCOVERABLE] = NativeCeremonies.registerSecurityKey;
c9579_11 = r52;
export default function WebAuthnRegisterStep() {
  let memo, memo2;
  const navigation = useNavigation();
  const styles = useStyles();
  const [registering, setState] = useState(false);
  const [state2, setState2] = useState("");
  const [state, onChange3] = useState(isAndroid() ? c9579_10.PASSKEY_CREDENTIAL_MANAGER : c9579_10.OTHER_AND_ANDROID_NONDISCOVERABLE);
  const callback = useCallback((a0) => {
    navigation.push(WebAuthnScreens.NAME, a0);
  }, [navigation]);
  memo = useMemo(() => c9579_11[state], [state]);
  memo2 = useMemo(() => ({
    onRegisterSuccess: callback,
    setError: setState2,
    setRegistering: setState
  }), [callback, setState2, setState]);
  return <SafeAreaPaddingView bottom left right style={styles.flexContainer}>
    <View style={styles.centerFlex}>
      <KeyImage />
      <Text style={styles.margin} variant="text-md/normal">
        {registering ? intl.string(t.aVMiX3) : intl.string(t.Lh5vTW)}
      </Text>
      {state2 != null && <Text variant="text-md/normal" color="text-feedback-critical">{state2}</Text>}
    </View>
    {NativeCeremonies.shouldDisplayAndroidFidoSelector && <AndroidPasskeyRadioGroup authenticatorSelection={state} registering={registering} onChange={onChange3} />}
    <ButtonGroup>
      <Button text={registering ? intl.string(t.wePEBF) : intl.string(t.oibaQa)} disabled={registering} loading={registering} onPress={() => memo(memo2)} size="lg" />
    </ButtonGroup>
  </SafeAreaPaddingView>;
};