// Metro module 11783 (f11784).
import { useCallback } from "react";
import { Image as Image2, View } from "react-native";
import { NativePermissionTypes } from "../../../native_permissions/NativePermissionConstants";
import { createStyles } from "../../../../design/components/Styles/native/createStyles";
import Module712 from "../../../../_bundle/Module712";
import { NAV_BAR_HEIGHT } from "../../../../design/components/Navigator/native/NavigatorConstants.native";
import NativePermissionUtils from "../../../native_permissions/NativePermissionUtils";
import Module11784 from "../../../../_bundle/Module11784";
import { Text } from "../../../../design/components/Text/native/Text";
import { intl, t } from "../../../../intl/index.native";
import { Button } from "../../../../design/components/Button/native/Button.native";
import ContactSyncError from "./ContactSyncError";
import RedesignContactSyncDiscoverabilityFooter from "./RedesignContactSyncDiscoverabilityFooter";
const useStyles = createStyles({
  content: {
    flex: 1,
    justifyContent: "center",
    alignItems: "center",
    textAlign: "center",
    marginTop: -Module712.space.PX_32 - NAV_BAR_HEIGHT
  },
  headerImage: {
    height: 135,
    width: 216,
    marginBottom: Module712.space.PX_24
  },
  title: {
    marginBottom: Module712.space.PX_8
  },
  subtitle: {
    marginBottom: Module712.space.PX_24
  },
  buttonContainer: {
    height: 48,
    width: "100%",
    paddingHorizontal: Module712.space.PX_16
  },
  trailing: {
    paddingBottom: Module712.space.PX_4,
    justifyContent: "flex-end",
    paddingHorizontal: Module712.space.PX_16
  }
});
export default function ContactSyncLandingOnboardingRedesign(props) {
  const { onNext, loading, error, discoverabilityEnabled, setDiscoverabilityEnabled } = props;
  const styles = useStyles();
  const callback = useCallback(async () => {
    let c27163_0;
    c27163_0 = void 0;
    if (await NativePermissionUtils.requestPermission(NativePermissionTypes.CONTACTS)) {
      (0, onNext)();
    }
  }, [onNext]);
  return <>
    <View style={styles.content}>
      <Image2 resizeMode="contain" style={styles.headerImage} source={Module11784} />
      <Text style={styles.title} variant="heading-xl/bold">
        {intl.string(t["/G+nci"])}
      </Text>
      <Text style={styles.subtitle} variant="text-sm/medium">
        {intl.string(t.G8zcHt)}
      </Text>
      <View style={styles.buttonContainer}>
        <Button variant="primary" size="lg" text={intl.string(t.LhlgY9)} onPress={callback} loading={loading} />
      </View>
      <ContactSyncError error={error} />
    </View>
    <View style={styles.trailing}>
      <RedesignContactSyncDiscoverabilityFooter discoverabilityEnabled={discoverabilityEnabled} onValueChanged={setDiscoverabilityEnabled} />
    </View>
  </>;
};