// Metro module 16279 (f16280).
import { useRef, useEffect } from "react";
import { View } from "react-native";
import { AnalyticEvents } from "../../../../Constants";
import { FamilyCenterAction } from "../../../parent_tools/FamilyCenterConstants";
import { createStyles } from "../../../../design/components/Styles/native/createStyles";
import Module712 from "../../../../_bundle/Module712";
import useSafeAreaInsets_native from "../../../safe_area/useSafeAreaInsets.native";
import { useConnectGuardianGate } from "../../../parent_tools/hooks/useConnectGuardianGate";
import AnalyticsUtils from "../../../../utils/AnalyticsUtils";
import { ActivityIndicator } from "../../../../design/components/ActivityIndicator/native/ActivityIndicator.native";
import { Text } from "../../../../design/components/Text/native/Text";
import { intl, t } from "../../../../intl/index.native";
import FamilyCenter_messages from "../../../parent_tools/FamilyCenter.messages";
import { ConnectGuardianCard } from "../../../parent_tools/native/ConnectGuardianCard";
import { Button } from "../../../../design/components/Button/native/Button.native";
const useStyles = createStyles({
  container: {
    flex: 1,
    backgroundColor: Module712.colors.BACKGROUND_BASE_LOW
  },
  centered: {
    flex: 1,
    alignItems: "center",
    justifyContent: "center",
    paddingHorizontal: Module712.space.PX_16
  },
  header: {
    marginBottom: Module712.space.PX_40
  },
  title: {
    paddingHorizontal: Module712.space.PX_16,
    marginBottom: Module712.space.PX_8,
    textAlign: "center"
  },
  description: {
    paddingHorizontal: Module712.space.PX_16,
    textAlign: "center"
  },
  cardSection: {
    alignItems: "center"
  },
  scanPrompt: {
    paddingHorizontal: Module712.space.PX_16,
    marginBottom: Module712.space.PX_24,
    textAlign: "center"
  },
  grow: {
    flexGrow: 1
  },
  footer: {
    paddingHorizontal: Module712.space.PX_16
  }
});
export default function ConnectGuardianModal(props) {
  const route = props.route;
  const onComplete = route.params.onComplete;
  const styles = useStyles();
  const bottom = useSafeAreaInsets_native().bottom;
  const connectGuardianGate = useConnectGuardianGate();
  const ref = useRef(false);
  useEffect(() => {
    if (!(connectGuardianGate.state !== "error" || ref.current)) {
      ref.current = true;
      AnalyticsUtils.track(AnalyticEvents.FAMILY_CENTER_ACTION, {
        action: FamilyCenterAction.NufConsentGateLinkCodeError,
        source: "NUF Connect Guardian"
      });
      if (onComplete != null) {
        onComplete(true);
      }
    }
  }, [connectGuardianGate.state, onComplete]);
  return connectGuardianGate.state !== "gate" ? <View style={[styles.container, styles.centered]}>
    <ActivityIndicator />
  </View> : <View style={styles.container}>
    <View style={styles.header}>
      <Text style={styles.title} variant="heading-xl/bold" color="text-default">
        {intl.string(FamilyCenter_messages.ITlV6p)}
      </Text>
      <Text style={styles.description} variant="text-sm/medium" color="text-muted">
        {intl.format(FamilyCenter_messages.F4GT2S, {
          link: "https://support.discord.com/hc/articles/14155060633623"
        })}
      </Text>
    </View>
    <View style={styles.cardSection}>
      <Text style={styles.scanPrompt} variant="text-md/semibold" color="text-default">
        {intl.string(FamilyCenter_messages.Mi60fm)}
      </Text>
      <ConnectGuardianCard shareActions="compact" linkCode={connectGuardianGate.linkCode} expiresAt={connectGuardianGate.expiresAt} onRefresh={connectGuardianGate.refresh} />
    </View>
    <View style={styles.grow} />
    <View style={[styles.footer, {
      paddingBottom: bottom + Module712.space.PX_16
    }]}>
      <Button variant="primary" size="lg" text={intl.string(t["3PatSz"])} onPress={() => onComplete == null ? void 0 : onComplete(false)} />
    </View>
  </View>;
};