// Metro module 13955 (f13956).
import { View } from "react-native";
import { UserLinkStatus } from "../FamilyCenterConstants";
import { createStyles } from "../../../design/components/Styles/native/createStyles";
import Module712 from "../../../_bundle/Module712";
import { useHasMaxConnections, useUsersForLinkStatus } from "../hooks/useUserLinks";
import { useAgeSpecificText } from "../hooks/useAgeSpecificText";
import { intl } from "../../../intl/index.native";
import FamilyCenter_messages from "../FamilyCenter.messages";
import { Text } from "../../../design/components/Text/native/Text";
import useIsInAdultAgeGroup from "../hooks/useIsInAdultAgeGroup";
import { PressableOpacity } from "../../../design/void/Pressables/native/Pressables";
import ModalActionCreators from "../../../actions/ModalActionCreators";
import { Icon } from "../../../design/void/native";
import Module10356 from "../../../_bundle/Module10356";
import Module13954 from "../../../_bundle/Module13954";
import FamilyCenterLinkRow from "./FamilyCenterLinkRow";
let useStyles, useStyles2;
const FamilyCenterPendingLinkRow = function FamilyCenterPendingLinkRow(props) {
  const otherUser = props.otherUser;
  const styles2 = useStyles2();
  const isInAdultAgeGroup = useIsInAdultAgeGroup();
  const hasMaxConnections = useHasMaxConnections();
  if (otherUser === void 0) {
    return null;
  }
  return <FamilyCenterLinkRow otherUser={otherUser} actions={isInAdultAgeGroup ? <PressableOpacity accessibilityRole="button" accessibilityLabel={intl.formatToPlainString(FamilyCenter_messages.oUpA6X, {
    name: otherUser == null ? void 0 : otherUser.toString()
  })} onPress={function onPress() {
    ModalActionCreators.pushLazy(import("./FamilyCenterModalCancel"), {
      otherUser
    });
  }} style={styles2.actionButton}>
    <Icon size={Icon.Sizes.SMALL} disableColor source={Module13954} />
  </PressableOpacity> : <>
    {hasMaxConnections ? null : <PressableOpacity accessibilityRole="button" accessibilityLabel={intl.formatToPlainString(FamilyCenter_messages.jc1Ip7, {
      name: otherUser == null ? void 0 : otherUser.toString()
    })} onPress={function onPress() {
      ModalActionCreators.pushLazy(import("./FamilyCenterModalAccept"), {
        otherUser
      });
    }} style={[styles2.actionButton, styles2.actionButtonFirst]}>
      <Icon size={Icon.Sizes.SMALL} disableColor source={Module10356} />
    </PressableOpacity>}
    <PressableOpacity accessibilityRole="button" accessibilityLabel={intl.formatToPlainString(FamilyCenter_messages["4GtllP"], {
      name: otherUser == null ? void 0 : otherUser.toString()
    })} onPress={function onPress() {
      ModalActionCreators.pushLazy(import("./FamilyCenterModalDecline"), {
        otherUser
      });
    }} style={styles2.actionButton}>
      <Icon size={Icon.Sizes.SMALL} disableColor source={Module13954} />
    </PressableOpacity>
  </>} />;
};
useStyles = createStyles({
  container: {
    marginTop: 24
  },
  content: {
    display: "flex",
    justifyContent: "center",
    backgroundColor: Module712.colors.BACKGROUND_BASE_LOW,
    borderRadius: Module712.radii.md
  },
  header: {
    marginBottom: 10
  }
});
useStyles2 = createStyles({
  actionButton: {
    backgroundColor: Module712.colors.BACKGROUND_SURFACE_HIGH,
    tintColor: Module712.colors.INTERACTIVE_TEXT_DEFAULT,
    borderRadius: Module712.radii.round,
    alignItems: "center",
    justifyContent: "center",
    height: 32,
    width: 32
  },
  actionButtonFirst: {
    marginRight: Module712.space.PX_8
  }
});
export default function FamilyCenterPendingLinks() {
  const styles = useStyles();
  const usersForLinkStatus = useUsersForLinkStatus(UserLinkStatus.PENDING);
  const ageSpecificText = useAgeSpecificText(intl.formatToPlainString(FamilyCenter_messages.IkAgkG, {
    count: usersForLinkStatus.length
  }), intl.formatToPlainString(FamilyCenter_messages.Q8XnAa, {
    count: usersForLinkStatus.length
  }));
  return usersForLinkStatus.length !== 0 ? <View style={styles.container}>
    <Text style={styles.header} variant="eyebrow" color="text-default">{ageSpecificText}</Text>
    <View style={styles.content}>
      {usersForLinkStatus.map((usersForLinkStatu) => <FamilyCenterPendingLinkRow key={`pending-${usersForLinkStatu.id}`} otherUser={usersForLinkStatu} />)}
    </View>
  </View> : null;
};