// Metro module 7625 (f7626).
import { useCallback } from "react";
import { HelpdeskArticles } from "../../../Constants";
import { createStyles } from "../../../design/components/Styles/native/createStyles";
import Module712 from "../../../_bundle/Module712";
import { useIsSuspendedUser } from "../../safety_hub/SafetyHubUtils";
import { AgeVerificationGetStartedModalScenes } from "./AgeVerificationGetStartedModal";
import useAgeVerificationMethods from "../hooks/useAgeVerificationMethods";
import { ModalScreen } from "../../../design/components/Modal/native/ModalScreen.native";
import { ModalContent } from "../../../design/components/Modal/native/ModalContent.native";
import { Stack } from "../../../design/components/Stack/native/Stack.native";
import { ShieldSpotIllustration } from "../../../design/assets/native";
import { Text } from "../../../design/components/Text/native/Text";
import { getAgeVerificationGetStartedTitle, getAgeVerificationGetStartedSubtitle } from "../AgeVerificationUtils";
import { AgeVerificationMethodsContainer } from "./AgeVerificationMethodsContainer";
import { intl } from "../../../intl/index.native";
import AgeAssurance_messages from "../AgeAssurance.messages";
import AgeVerificationActionCreators_native from "../AgeVerificationActionCreators.native";
import HelpdeskUtils from "../../../utils/HelpdeskUtils";
const useStyles = createStyles({
  header: {
    textAlign: "center"
  },
  helpLink: {
    marginTop: Module712.space.PX_16,
    textAlign: "center"
  }
});
export default function AgeVerificationEmbeddedIntroScreen(props) {
  const { onClose, modalSessionId, classificationId, entryPoint, navigation } = props;
  const styles = useStyles();
  const isSuspendedUser = useIsSuspendedUser();
  const ageVerificationMethods = useAgeVerificationMethods({
    onClose,
    classificationId,
    onGoogleWalletSelect: useCallback(() => {
      navigation.navigate(AgeVerificationGetStartedModalScenes.GOOGLE_WALLET_VERIFICATION);
    }, [navigation])
  }).ageVerificationMethods;
  return <ModalScreen>
    <ModalContent>
      <Stack align="center" justify="center" spacing={24}>
        <Stack align="center" justify="center" spacing={16}>
          <ShieldSpotIllustration height={100} width={177} />
          <Stack align="center" justify="center" spacing={8}>
            <Text accessibilityRole="header" variant="heading-xl/bold" color="mobile-text-heading-primary">
              {getAgeVerificationGetStartedTitle(entryPoint)}
            </Text>
            <Text variant="text-md/medium" color="text-strong" style={styles.header}>
              {getAgeVerificationGetStartedSubtitle(entryPoint, void 0, isSuspendedUser)}
            </Text>
          </Stack>
        </Stack>
        <AgeVerificationMethodsContainer ageVerificationMethods={ageVerificationMethods} modalSessionId={modalSessionId} />
      </Stack>
      <Text variant="text-xs/medium" color="text-muted" style={styles.helpLink}>
        {intl.format(AgeAssurance_messages.lG69e1, {
          handleOnHelpUrlHook: () => {
            AgeVerificationActionCreators_native.openUrl(HelpdeskUtils.getArticleURL(HelpdeskArticles.TIGGER_PAWTECT_LEARN_MORE));
          }
        })}
      </Text>
    </ModalContent>
  </ModalScreen>;
};