// Metro module 13946 (f13947).
import { View } from "react-native";
import { MAX_PARENT_TO_TEEN_ACTIVE_CONNECTIONS, MAX_TEEN_TO_PARENT_ACTIVE_CONNECTIONS } from "../FamilyCenterConstants";
import { createStyles } from "../../../design/components/Styles/native/createStyles";
import Module712 from "../../../_bundle/Module712";
import useIsInAdultAgeGroup from "../hooks/useIsInAdultAgeGroup";
import { useActiveLinkUsers } 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 FamilyCenterEmpty from "./FamilyCenterEmpty";
import FamilyCenterLinkRow from "./FamilyCenterLinkRow";
import { PressableOpacity } from "../../../design/void/Pressables/native/Pressables";
import ModalActionCreators from "../../../actions/ModalActionCreators";
import { Icon } from "../../../design/void/native";
import Module13954 from "../../../_bundle/Module13954";
let useStyles, useStyles2;
const FamilyCenterAcceptedLinkRow = function FamilyCenterAcceptedLinkRow(props) {
  const otherUser = props.otherUser;
  const styles2 = useStyles2();
  return otherUser !== void 0 ? <FamilyCenterLinkRow otherUser={otherUser} actions={<PressableOpacity accessibilityRole="button" accessibilityLabel={intl.formatToPlainString(FamilyCenter_messages.T7DUoU, {
    name: otherUser == null ? void 0 : otherUser.toString()
  })} onPress={function onPress() {
    ModalActionCreators.pushLazy(import("./FamilyCenterModalDisconnect"), {
      otherUser
    });
  }} style={styles2.actionButton}>
    <Icon size={Icon.Sizes.SMALL} disableColor source={Module13954} />
  </PressableOpacity>} /> : null;
};
useStyles = createStyles({
  container: {
    marginTop: 24
  },
  content: {
    display: "flex",
    justifyContent: "center",
    backgroundColor: Module712.colors.BACKGROUND_BASE_LOW,
    borderRadius: Module712.radii.md
  },
  empty: {
    padding: 20,
    alignSelf: "center"
  },
  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
  }
});
export default function FamilyCenterAcceptedLinks() {
  const styles = useStyles();
  const isInAdultAgeGroup = useIsInAdultAgeGroup();
  const activeLinkUsers = useActiveLinkUsers();
  const r9 = {
    count: activeLinkUsers.length,
    max: isInAdultAgeGroup ? MAX_PARENT_TO_TEEN_ACTIVE_CONNECTIONS : MAX_TEEN_TO_PARENT_ACTIVE_CONNECTIONS
  };
  return <View style={styles.container}>
    <Text style={styles.header} variant="eyebrow" color="text-default">
      {useAgeSpecificText(intl.formatToPlainString(FamilyCenter_messages["+tnO34"], r9), intl.formatToPlainString(FamilyCenter_messages["pu6/U0"], r9))}
    </Text>
    <View style={styles.content}>
      {activeLinkUsers.length === 0 ? <View style={styles.empty}>
        <FamilyCenterEmpty text={intl.string(FamilyCenter_messages.C4ScLD)} />
      </View> : activeLinkUsers.map((activeLinkUser) => <FamilyCenterAcceptedLinkRow key={`accepted-${activeLinkUser.id}`} otherUser={activeLinkUser} />)}
    </View>
  </View>;
};