// Metro module 15315 (f15316).
import { useCallback, useMemo } from "react";
import { View } from "react-native";
import { AnalyticEvents } from "../../../Constants";
import { Sections } from "../../main_tabs_v2/native/friends/screens/FriendsScreenConstants";
import { createStyles } from "../../../design/components/Styles/native/createStyles";
import { useMessagesTabLayout, getLayoutStyles, isLayoutCompact, makeSizeStyle } from "../../main_tabs_v2/native/shared_components/guild_channels/layouts/ChannelListLayout";
import Module712 from "../../../_bundle/Module712";
import { isAndroid } from "../../../utils/PlatformUtils";
import { useNavigation } from "../../../design/components/Navigator/native/useNavigation.native";
import AnalyticsUtils from "../../../utils/AnalyticsUtils";
import { AvatarSizes, Icon, IconSizes, Avatar } from "../../../design/void/native";
import { useFontScale } from "../../screen/native/useFontScale";
import { renderChannelPressableWrapper } from "../../main_tabs_v2/native/shared_components/guild_channels/ChannelPressableWrapper";
import { PressableHighlight } from "../../../design/void/Pressables/native/Pressables";
import { renderChannelWrapper } from "../../main_tabs_v2/native/shared_components/guild_channels/ChannelWrapper";
import { AvatarDuoPile } from "../../../design/components/Pile/native/AvatarDuoPile.native";
import { Text } from "../../../design/components/Text/native/Text";
import { intl, t } from "../../../intl/index.native";
import Module5229 from "../../../_bundle/Module5229";
let useStyles;
const ForYouShowAllRow = function ForYouShowAllRow(props) {
  const { children, count, onPress, panelVariant = false } = props;
  const messagesTabLayout2 = useMessagesTabLayout(panelVariant);
  const styles = useStyles(messagesTabLayout2);
  const styles2 = getLayoutStyles(messagesTabLayout2);
  const fontScale = useFontScale();
  return renderChannelPressableWrapper(<PressableHighlight accessibilityRole="button" underlayColor={styles.rowActive.backgroundColor} onPress={onPress} style={[styles.pressable, {
    borderRadius: styles2.container.borderRadius
  }]}>
    {renderChannelWrapper(<>
      <View style={styles.avatar}>
        <AvatarDuoPile size={isLayoutCompact(messagesTabLayout2) ? AvatarSizes.XSMALL_20 : AvatarSizes.SMALL} aria-label="">{children}</AvatarDuoPile>
      </View>
      <View style={styles.textContainer}>
        <Text lineClamp={1} variant={styles2.channelName.text.variant} color="text-brand" style={styles.nameText}>
          {intl.format(t.NrzztX, {
            count
          })}
        </Text>
      </View>
      <Icon style={styles.icon} color={styles.iconColor.color} source={Module5229} size={IconSizes.CUSTOM} />
    </>, {
      layout: messagesTabLayout2,
      fontScale,
      panelVariant
    })}
  </PressableHighlight>, {
    layout: messagesTabLayout2,
    panelVariant
  });
};
useStyles = createStyles((a0) => {
  const styles = getLayoutStyles(a0);
  const r20 = makeSizeStyle(styles.icon.wrapper.size);
  return {
    rowActive: {
      backgroundColor: Module712.colors.BACKGROUND_MOD_MUTED
    },
    pressable: {
      flex: 1
    },
    textContainer: {
      flexDirection: "column",
      flexGrow: 2,
      flexShrink: 2,
      alignSelf: "center",
      overflow: "hidden",
      marginTop: -2,
      marginRight: Module712.space.PX_8
    },
    nameText: {
      flexShrink: 1,
      marginBottom: isAndroid() ? 2 : 0
    },
    avatar: {
      position: "relative",
      borderRadius: Module712.radii.round,
      justifyContent: "center",
      alignItems: "center",
      flexShrink: 0,
      flexGrow: 0,
      ...r20,
      marginRight: styles.icon.margin.marginRight + 4
    },
    icon: {
      width: 8,
      height: 32,
      paddingRight: Module712.space.PX_24
    },
    iconColor: {
      color: Module712.colors.INTERACTIVE_TEXT_DEFAULT
    }
  };
});
export function ForYouSuggestedFriendShowAllRow(props) {
  const { suggestedFriends, panelVariant = false } = props;
  const navigation = useNavigation();
  const messagesTabLayout = useMessagesTabLayout(panelVariant);
  return <ForYouShowAllRow count={suggestedFriends.length} onPress={useCallback(() => {
    AnalyticsUtils.track(AnalyticEvents.FRIEND_FINDER_SECTION_EXPANDED, {
      section_id: Sections.FRIEND_SUGGESTIONS,
      truncated_count: 2,
      expanded_count: suggestedFriends.length,
      location: "NotificationsTab"
    });
    navigation.navigate("friends", {
      screen: "suggested-friends",
      params: {
        presentation: "card"
      }
    });
  }, [navigation, suggestedFriends])} panelVariant={panelVariant}>
    {useMemo(() => suggestedFriends.slice(2, 4).map((item) => <Avatar key={item.user.id} user={item.user} guildId={void 0} size={isLayoutCompact(messagesTabLayout) ? AvatarSizes.XSMALL_20 : AvatarSizes.SMALL} />), [messagesTabLayout, suggestedFriends])}
  </ForYouShowAllRow>;
}