// Metro module 16296 (f16297).
import { useCallback, useEffect, useMemo } from "react";
import { View } from "react-native";
import FamilyCenterStore from "../FamilyCenterStore";
import { createStyles } from "../../../design/components/Styles/native/createStyles";
import Module712 from "../../../_bundle/Module712";
import { useSyncMessages, intl, t } from "../../../intl/index.native";
import FamilyCenter_messages, { messagesLoader } from "../FamilyCenter.messages";
import { presentFailedToast } from "../../toast/native/ToastUtils";
import ModalActionCreators from "../../../actions/ModalActionCreators";
import { useFamilyCenterActions } from "../hooks/useFamilyCenterActions";
import { useStateFromStores } from "../../../_bundle/defaultAreStatesEqual";
import useOnNewPendingRequest from "../hooks/useOnNewPendingRequest";
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 { Text } from "../../../design/components/Text/native/Text";
import { ConnectGuardianCard } from "./ConnectGuardianCard";
import { ActivityIndicator } from "../../../design/components/ActivityIndicator/native/ActivityIndicator.native";
import { getHeaderBackButton } from "../../../design/components/Navigator/native/NavigatorHeader.native";
import { Modal } from "../../../design/components/Modal/native/Modal.native";
let useStyles;
const ConnectGuardianShareScreen = function ConnectGuardianShareScreen() {
  const styles = useStyles();
  useSyncMessages(messagesLoader);
  const getLinkCode = useFamilyCenterActions({
    onError: useCallback(() => {
      presentFailedToast(intl.string(t.R0RpRX));
      ModalActionCreators.pop();
    }, [])
  }).getLinkCode;
  const stateFromStores2 = useStateFromStores([FamilyCenterStore], () => FamilyCenterStore.getLinkCode());
  const stateFromStores = useStateFromStores([FamilyCenterStore], () => FamilyCenterStore.getLinkCodeExpiresAt());
  useEffect(() => {
    getLinkCode();
  }, []);
  useOnNewPendingRequest(ModalActionCreators.pop);
  return <ModalScreen>
    <ModalContent>
      <Stack spacing={Module712.space.PX_40}>
        <Stack spacing={Module712.space.PX_8}>
          <Text style={styles.title} variant="heading-xl/bold" color="mobile-text-heading-primary" accessibilityRole="header">
            {intl.string(FamilyCenter_messages.ITlV6p)}
          </Text>
          <Text style={styles.body} variant="text-sm/medium" color="text-muted">
            {intl.format(FamilyCenter_messages.F4GT2S, {
              link: "https://support.discord.com/hc/articles/14155060633623"
            })}
          </Text>
        </Stack>
        <Stack spacing={Module712.space.PX_24} style={styles.cardSection}>
          <Text style={styles.qrLabel} variant="text-md/semibold" color="mobile-text-heading-primary">
            {intl.string(FamilyCenter_messages.pojgfk)}
          </Text>
          {stateFromStores2 != null && stateFromStores != null ? <ConnectGuardianCard shareActions="full" linkCode={stateFromStores2} expiresAt={stateFromStores} onRefresh={getLinkCode} /> : <View style={styles.loading}>
            <ActivityIndicator />
          </View>}
        </Stack>
      </Stack>
    </ModalContent>
  </ModalScreen>;
};
useStyles = createStyles({
  title: {
    textAlign: "center"
  },
  body: {
    textAlign: "center"
  },
  qrLabel: {
    textAlign: "center"
  },
  cardSection: {
    alignItems: "center"
  },
  loading: {
    alignItems: "center",
    justifyContent: "center",
    paddingVertical: Module712.space.PX_24
  }
});
export default function ConnectGuardianShareModal() {
  return <Modal initialRouteName="CONNECT_GUARDIAN_SHARE" screens={useMemo(() => ({
    CONNECT_GUARDIAN_SHARE: {
      headerShown: true,
      headerLeft: getHeaderBackButton(ModalActionCreators.pop),
      headerTitle: () => null,
      render: () => <ConnectGuardianShareScreen />
    }
  }), [])} headerBackTitle={intl.string(t["13/7kX"])} />;
};