// Metro module 13756 (f13757).
import { useState, useLayoutEffect } from "react";
import { Image as Image2, ScrollView, View } from "react-native";
import { WebAuthnScreens } from "../../WebAuthnConstants";
import { HelpdeskArticles } from "../../../../Constants";
import { ContentDismissActionType } from "../../../dismissible_content/DismissibleContentConstants";
import { createStyles } from "../../../../design/components/Styles/native/createStyles";
import Module712 from "../../../../_bundle/Module712";
import { useNavigation } from "../../../../design/components/Navigator/native/useNavigation.native";
import { intl, t } from "../../../../intl/index.native";
import PasskeyUpsellManager from "../PasskeyUpsellManager";
import PasskeyUpsellActionCreators from "../PasskeyUpsellActionCreators";
import { getHeaderCloseButton } from "../../../../design/components/Navigator/native/NavigatorHeader.native";
import HelpdeskUtils from "../../../../utils/HelpdeskUtils";
import { SafeAreaPaddingView } from "../../../../components_native/common/SafeAreaView";
import Module13761 from "../../../../_bundle/Module13761";
import { Text } from "../../../../design/components/Text/native/Text";
import { isIOS } from "../../../../utils/PlatformUtils";
import { Button } from "../../../../design/components/Button/native/Button.native";
import NativeCeremonies from "../NativeCeremonies";
const useStyles = createStyles({
  container: {
    flex: 1,
    flexDirection: "column",
    backgroundColor: Module712.colors.BACKGROUND_BASE_LOW
  },
  scrollViewContainer: {
    flexGrow: 1,
    justifyContent: "space-between",
    paddingHorizontal: Module712.space.PX_16
  },
  headerContainer: {
    alignItems: "center",
    justifyContent: "center",
    gap: Module712.space.PX_16
  },
  headerImage: {
    height: 190,
    width: 220,
    resizeMode: "contain"
  },
  headerText: {
    textAlign: "center"
  },
  circleIcon: {
    backgroundColor: Module712.colors.BACKGROUND_BASE_LOWEST,
    width: Module712.space.PX_32,
    height: Module712.space.PX_32,
    borderRadius: Module712.radii.round
  },
  listContainer: {
    gap: Module712.space.PX_24,
    marginLeft: Module712.space.PX_8,
    marginRight: Module712.space.PX_8
  },
  row: {
    flexDirection: "row",
    gap: Module712.space.PX_8,
    alignItems: "center"
  },
  text: {
    flex: 1
  },
  buttonContainer: {
    gap: Module712.space.PX_16,
    alignItems: "center"
  }
});
export default function PasskeyUpsellView() {
  let navigation, onCancel2;
  const onRegisterSuccess2 = function onRegisterSuccess(a0) {
    navigation.push(WebAuthnScreens.NAME, {
      ...a0,
      name: intl.string(t["8H5RmH"])
    });
  };
  onCancel2 = function onCancel() {
    PasskeyUpsellManager.markDismissed(ContentDismissActionType.USER_DISMISS);
    PasskeyUpsellActionCreators.closePasskeyUpsellModal();
  };
  navigation = useNavigation();
  const styles = useStyles();
  const [, setState] = useState("");
  const [disabled, setState2] = useState(false);
  useLayoutEffect(() => {
    navigation.setOptions({
      headerLeft: getHeaderCloseButton(onCancel2)
    });
  }, [navigation]);
  const articleURL = HelpdeskUtils.getArticleURL(HelpdeskArticles.SETTING_UP_TWO_FACTOR);
  const r98 = [<View style={styles.headerContainer}>
    <Image2 source={Module13761} style={styles.headerImage} />
    <Text accessibilityRole="header" variant="heading-xl/bold" color="mobile-text-heading-primary" style={styles.headerText}>
      {intl.string(t.CjleBl)}
    </Text>
    <Text variant="heading-md/normal" color="text-default" style={styles.headerText}>
      {isIOS() ? intl.string(t["7yxR9t"]) : intl.string(t.d6uxJy)}
    </Text>
  </View>, , ,];
  const r122 = [<View style={styles.row}>
    <View style={styles.circleIcon} />
    <Text variant="heading-md/normal" color="text-default" style={styles.text}>
      {intl.string(t.HtqVkj)}
    </Text>
  </View>, <View style={styles.row}>
    <View style={styles.circleIcon} />
    <Text variant="heading-md/normal" color="text-default" style={styles.text}>
      {isIOS() ? intl.string(t.U409I8) : intl.string(t.uYfqlo)}
    </Text>
  </View>];
  r98[1] = <View style={styles.listContainer}>{r122}</View>;
  r98[2] = <View style={styles.buttonContainer}>
    <Text variant="text-sm/semibold" color="text-brand">
      {intl.format(t.OeGXVv, {
        learnMoreLink: articleURL
      })}
    </Text>
    <Button text={disabled ? intl.string(t.wePEBF) : intl.string(t.NIFmCJ)} onPress={function onPress() {
      PasskeyUpsellManager.markDismissed(ContentDismissActionType.TAKE_ACTION);
      NativeCeremonies.registerPasskey({
        setRegistering: setState2,
        setError: setState,
        onRegisterSuccess: onRegisterSuccess2
      });
    }} size="lg" disabled={disabled} loading={disabled} grow />
    <Button text={disabled ? intl.string(t.wePEBF) : intl.string(t["7J6/nG"])} onPress={onCancel2} size="lg" variant="secondary" grow />
  </View>;
  return <SafeAreaPaddingView bottom style={styles.container}>
    <ScrollView contentContainerStyle={styles.scrollViewContainer}>{r98}</ScrollView>
  </SafeAreaPaddingView>;
};