// Metro module 7619 (f7620).
import { ScrollView, View } from "react-native";
import { getAgeVerificationGetStartedSteps } from "../AgeVerificationConstants";
import { HelpdeskArticles } from "../../../Constants";
import { SafetyHubLinks } from "../../safety_hub/SafetyHubConstants";
import { createStyles } from "../../../design/components/Styles/native/createStyles";
import Module712 from "../../../_bundle/Module712";
import useSafeAreaInsets_native from "../../safe_area/useSafeAreaInsets.native";
import { useInitiateAgeVerification, getAgeVerificationGetStartedTitle, getAgeVerificationGetStartedSubtitle } from "../AgeVerificationUtils";
import { useIsManualAgeVerificationHidden } from "../HideManualAgeVerificationExperiment";
import { ShieldSpotIllustration } from "../../../design/assets/native";
import { Text } from "../../../design/components/Text/native/Text";
import { TableRowGroup } from "../../../design/components/TableRow/native/TableRowGroup.native";
import SafetyTipsRow from "../../self_mod/shared/native/SafetyTipsRow";
import { intl, t } from "../../../intl/index.native";
import AgeVerificationActionCreators_native from "../AgeVerificationActionCreators.native";
import HelpdeskUtils from "../../../utils/HelpdeskUtils";
import { trackAgeVerificationModalClicked, AgeVerificationModalVersion, AgeVerificationModalCta } from "../AgeVerificationAnalyticsUtils";
import { Button } from "../../../design/components/Button/native/Button.native";
import { LinkExternalSmallIcon } from "../../../design/components/Icon/native/redesign/generated/LinkExternalSmallIcon";
const useStyles = createStyles({
  getStartedContainer: {
    paddingHorizontal: Module712.space.PX_16,
    gap: Module712.space.PX_16,
    flex: 1
  },
  getStartedHeaderContainer: {
    alignItems: "center",
    gap: Module712.space.PX_8
  },
  ageGroupLearnMoreContainer: {
    alignItems: "center",
    marginTop: -Module712.space.PX_8
  },
  getStartedHeaderText: {
    textAlign: "center"
  },
  getStartedRequestTextContainer: {
    alignItems: "center"
  },
  getStartedFooterContainer: {
    paddingHorizontal: Module712.space.PX_16,
    paddingTop: Module712.space.PX_48
  },
  getStartedRequestText: {
    textAlign: "center",
    marginBottom: Module712.space.PX_16
  },
  getStartedFooterButtonsContainer: {
    gap: Module712.space.PX_8
  }
});
export default function GetStartedScreen(props) {
  const { modalSessionId, onClose, entryPoint } = props;
  const styles = useStyles();
  const bottom = useSafeAreaInsets_native().bottom;
  const initiateAgeVerification2 = useInitiateAgeVerification({
    onComplete: onClose,
    entryPoint
  });
  const { loading, initiateAgeVerification } = initiateAgeVerification2;
  const isManualAgeVerificationHidden = useIsManualAgeVerificationHidden("age_verification_get_started_modal");
  return <>
    <ScrollView>
      <View style={styles.getStartedContainer}>
        <View style={styles.getStartedHeaderContainer}>
          <ShieldSpotIllustration />
          <Text variant="heading-xl/bold" color="mobile-text-heading-primary" style={styles.getStartedHeaderText}>
            {getAgeVerificationGetStartedTitle(entryPoint)}
          </Text>
          <Text variant="heading-md/medium" color="text-default" style={styles.getStartedHeaderText}>
            {getAgeVerificationGetStartedSubtitle(entryPoint)}
          </Text>
        </View>
        <TableRowGroup hasIcons>
          {getAgeVerificationGetStartedSteps(modalSessionId).map(({ title, description }, a1) => <SafetyTipsRow key={a1} index={a1 + 1} tip={<Text variant="text-md/medium" color="mobile-text-heading-primary">{title}</Text>} description={description != null ? <Text variant="text-xs/medium" color="text-subtle">{description}</Text> : null} />)}
        </TableRowGroup>
        <View style={styles.ageGroupLearnMoreContainer}>
          <Text variant="text-xs/medium" color="text-muted">
            {intl.format(t["L+FgkZ"], {
              handleOnHelpUrlHook: () => {
                AgeVerificationActionCreators_native.openUrl(HelpdeskUtils.getArticleURL(HelpdeskArticles.TIGGER_PAWTECT_LEARN_MORE));
                trackAgeVerificationModalClicked(modalSessionId, AgeVerificationModalVersion.PRIMARY, AgeVerificationModalCta.LEARN_MORE);
              }
            })}
          </Text>
        </View>
      </View>
    </ScrollView>
    <View style={[styles.getStartedFooterContainer, {
      paddingBottom: bottom
    }]}>
      {isManualAgeVerificationHidden ? !isManualAgeVerificationHidden : <View style={styles.getStartedRequestTextContainer}>
        <Text variant="text-xs/medium" color="text-muted" style={styles.getStartedRequestText}>
          {intl.format(t.pJAxgQ, {
            handleOnRequestHook: () => {
              AgeVerificationActionCreators_native.openUrl(SafetyHubLinks.APPEALS_LINK);
              trackAgeVerificationModalClicked(modalSessionId, AgeVerificationModalVersion.PRIMARY, AgeVerificationModalCta.MANUAL_REVIEW_REQUEST);
            }
          })}
        </Text>
      </View>}
      <View style={styles.getStartedFooterButtonsContainer}>
        <Button variant="primary" size="lg" text={intl.string(t.SJMnkX)} onPress={async () => {
          trackAgeVerificationModalClicked(modalSessionId, AgeVerificationModalVersion.PRIMARY, AgeVerificationModalCta.GET_STARTED);
          await initiateAgeVerification();
        }} icon={<LinkExternalSmallIcon color={Module712.colors.WHITE} />} loading={loading} iconPosition="end" />
      </View>
    </View>
  </>;
};