// Metro module 11851 (f11852).
import { useCallback } from "react";
import { ScrollView, View } from "react-native";
import { useContactSyncModalStore } from "../../../contact_sync/native/ContactSyncModalStore";
import { Fonts } from "../../../../Constants";
import { createStyles } from "../../../../design/components/Styles/native/createStyles";
import Module712 from "../../../../_bundle/Module712";
import TextStyles from "../../../rebrand/native/TextStyles";
import useSafeAreaInsets_native from "../../../safe_area/useSafeAreaInsets.native";
import ActionSheetActionCreators from "../../../action_sheet/native/ActionSheetActionCreators";
import { NAV_BAR_HEIGHT } from "../../../../design/components/Navigator/native/NavigatorConstants.native";
import FastImage from "../../../../components_native/common/FastImage";
import Module11853 from "../../../../_bundle/Module11853";
import { Text } from "../../../../design/components/Text/native/Text";
import { intl, t } from "../../../../intl/index.native";
import { FormRow, FormCheckboxRow } from "../../../../design/void/Form/native/index";
import { toggleDiscoverabilityForUser } from "../NUFActionCreators";
import { Button } from "../../../../design/components/Button/native/Button.native";
const useStyles = createStyles({
  container: {
    flex: 1,
    backgroundColor: Module712.colors.BACKGROUND_BASE_LOW
  },
  headerContainer: {
    flexGrow: 0,
    justifyContent: "center",
    marginBottom: 24
  },
  header: {
    paddingHorizontal: 16,
    alignItems: "center"
  },
  image: {
    width: "100%",
    marginHorizontal: 0
  },
  button: {
    flexGrow: 0,
    marginHorizontal: 16,
    marginBottom: 24
  },
  title: {
    textAlign: "center",
    marginTop: 16
  },
  subtitle: {
    textAlign: "center",
    marginTop: 8
  },
  formRow: {
    paddingVertical: 16,
    backgroundColor: Module712.colors.BACKGROUND_SURFACE_HIGH
  },
  formText: {
    ...TextStyles(Fonts.PRIMARY_SEMIBOLD, Module712.colors.INTERACTIVE_TEXT_ACTIVE, 16)
  },
  footerContainer: {
    flexGrow: 1,
    width: "100%"
  },
  info: {
    paddingHorizontal: 16,
    marginTop: 8,
    marginBottom: 24
  }
});
export default function DiscoverabilityLanding(props) {
  const styles = useStyles();
  const onNext = props.onNext;
  const contactSyncModalStore = useContactSyncModalStore();
  let allowEmail2 = contactSyncModalStore.allowEmail;
  const allowEmail = allowEmail2;
  const allowPhone = contactSyncModalStore.allowPhone;
  const bottom = useSafeAreaInsets_native().bottom;
  const callback = useCallback(() => {
    ActionSheetActionCreators.openLazy(import("./DiscoverabilityActionSheet"), "Discoverability Landing", {
      allowPhone,
      allowEmail
    });
  }, [allowPhone, allowEmail]);
  const r82 = [<View style={styles.headerContainer}>
    <View style={styles.header}>
      <FastImage resizeMode="contain" style={styles.image} source={Module11853} />
      <Text style={styles.title} accessibilityRole="header" variant="heading-xl/extrabold" color="mobile-text-heading-primary">
        {intl.string(t.n8nw6j)}
      </Text>
      <Text style={styles.subtitle} variant="text-sm/medium" color="text-subtle">
        {intl.string(t.KMW0kP)}
      </Text>
    </View>
  </View>, ,];
  const props2 = {
    DEPRECATED_style: styles.formRow,
    label: <FormRow.Label style={styles.formText} text={intl.string(t.gMUgpv)} />,
    onPress: toggleDiscoverabilityForUser,
    selected: null
  };
  if (!allowEmail) {
    allowEmail2 = allowPhone;
  }
  props2.selected = allowEmail2;
  r82[1] = <View style={styles.footerContainer}>
    <FormCheckboxRow {...props2} />
    <Text style={styles.info} variant="heading-deprecated-12/medium" color="text-default">
      {intl.string(t["DGZg+k"])}
      {" "}
      {intl.format(t.QmF5z4, {
        learnMoreHook: function learnMoreHook(a0, a1) {
          return <Text key={a1} onPress={callback} variant="text-sm/medium" color="text-link">
            {a0}
          </Text>;
        }
      })}
    </Text>
    <View style={styles.button}>
      <Button text={intl.string(t.PDTjLN)} onPress={() => onNext()} grow />
    </View>
  </View>;
  return <ScrollView style={styles.container} contentContainerStyle={{
    paddingTop: NAV_BAR_HEIGHT + 32,
    paddingBottom: bottom + 16
  }}>{r82}</ScrollView>;
};