// Metro module 16716 (f16717).
import { useMemo, useEffect } from "react";
import { Pressable } from "react-native";
import UserStore from "../../../../stores/UserStore";
import { HelpdeskArticles } from "../../../../Constants";
import { createStyles } from "../../../../design/components/Styles/native/createStyles";
import { v4 } from "../../../../_bundle/Module514";
import { useOnTaskComplete } from "../SafetyFlowsUtils";
import { useStateFromStores } from "../../../../_bundle/Module589";
import useAgeVerificationMethods from "../../../age_assurance/hooks/useAgeVerificationMethods";
import { TaskInputType } from "../../types";
import { AgeVerificationStatusUkAndAusOnly } from "../../../../flow/Server";
import { trackAgeVerificationModalViewed, AgeVerificationModalVersion, AgeVerificationModalEntryPoint } from "../../../age_assurance/AgeVerificationAnalyticsUtils";
import SafetyFlowTaskScreen from "../SafetyFlowTaskScreen";
import { ShieldSpotIllustration } from "../../../../design/assets/native";
import { intl, t } from "../../../../intl/index.native";
import SafetyFlows_messages from "../../SafetyFlows.messages";
import AgeAssurance_messages from "../../../age_assurance/AgeAssurance.messages";
import AgeVerificationActionCreators_native from "../../../age_assurance/AgeVerificationActionCreators.native";
import HelpdeskUtils from "../../../../utils/HelpdeskUtils";
import { ModalDisclaimer } from "../../../../design/components/Modal/native/ModalDisclaimer.native";
import AuthenticationActionCreators from "../../../../actions/AuthenticationActionCreators";
import { Text } from "../../../../design/components/Text/native/Text";
import { AgeVerificationMethodsContainer } from "../../../age_assurance/native/AgeVerificationMethodsContainer";
const useStyles = createStyles({
  helpLink: {
    textAlign: "center"
  }
});
export default function AgeVerificationScreen() {
  let onTaskComplete, stateFromStores;
  const memo = useMemo(() => v4(), []);
  const styles = useStyles();
  onTaskComplete = useOnTaskComplete();
  stateFromStores = useStateFromStores([UserStore], () => UserStore.getCurrentUser());
  const ageVerificationMethods = useAgeVerificationMethods({
    onClose: () => onTaskComplete({
      type: TaskInputType.Empty
    })
  });
  const { loading, ageVerificationMethods: ageVerificationMethods2 } = ageVerificationMethods;
  useEffect(() => {
    if (stateFromStores?.ageVerificationStatus !== AgeVerificationStatusUkAndAusOnly.UNVERIFIED) {
      onTaskComplete({
        type: TaskInputType.Empty
      });
    }
  }, [onTaskComplete, stateFromStores]);
  useEffect(() => {
    trackAgeVerificationModalViewed(memo, AgeVerificationModalVersion.EXPRESSIVE_PRIMARY, AgeVerificationModalEntryPoint.SAFETY_FLOWS);
  }, [memo]);
  return <SafetyFlowTaskScreen ImageComponent={<ShieldSpotIllustration />} title={intl.string(SafetyFlows_messages["dSkE/A"])} subtitle={intl.format(AgeAssurance_messages.RpMIT0, {
    handleOnHelpUrlHook: () => {
      AgeVerificationActionCreators_native.openUrl(HelpdeskUtils.getArticleURL(HelpdeskArticles.TIGGER_PAWTECT_LEARN_MORE));
    }
  })} footer={<ModalDisclaimer>
    <Pressable accessibilityRole="button" onPress={() => {
      AuthenticationActionCreators.logout("age_verification_screen");
    }}>
      <Text variant="text-sm/medium" color="text-link" style={styles.helpLink}>
        {intl.string(t["2jxGer"])}
      </Text>
    </Pressable>
  </ModalDisclaimer>} submitting={loading}>
    <AgeVerificationMethodsContainer ageVerificationMethods={ageVerificationMethods2} modalSessionId={memo} />
  </SafetyFlowTaskScreen>;
};