// Metro module 15309 (f15310).
import { useCallback, useEffect } from "react";
import { View } from "react-native";
import AccessibilityStore from "../../a11y/AccessibilityStore";
import RelationshipStore from "../../../stores/RelationshipStore";
import { AnalyticEvents, RelationshipTypes } from "../../../Constants";
import { createStyles } from "../../../design/components/Styles/native/createStyles";
import { getLayoutStyles, makeSizeStyle, useMessagesTabLayout, isLayoutCozy } from "../../main_tabs_v2/native/shared_components/guild_channels/layouts/ChannelListLayout";
import Module712 from "../../../_bundle/Module712";
import { isAndroid } from "../../../utils/PlatformUtils";
import useAnalyticsLocations from "../../app_analytics/useAnalyticsLocations";
import { useFontScale } from "../../screen/native/useFontScale";
import { useStateFromStoresObject, useStateFromStores } from "../../../_bundle/defaultAreStatesEqual";
import UserUtils from "../../../utils/UserUtils";
import { getSuggestedContactNameForSuggestion } from "../../friend_suggestions/FriendSuggestionUtils";
import { intl, t } from "../../../intl/index.native";
import { useSharedValue } from "../../reanimated/ReanimatedRexport";
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 { Avatar } from "../../../design/void/native";
import { Text } from "../../../design/components/Text/native/Text";
import { ActionStatusSubLabel } from "../../main_tabs_v2/native/friends/components/ActionStatusSubLabel";
import { ContactSuggestionActions } from "../../main_tabs_v2/native/friends/components/ContactSuggestionActions";
import AnalyticsUtils from "../../../utils/AnalyticsUtils";
const 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
    }
  };
});
export default function ForYouSuggestedFriendRow(props) {
  let sharedValue, stateFromStores;
  const { suggestedFriend, onAddSuggestion: onAddSuggestion2, onAddSuggestionAnimationFinish, panelVariant = false } = props;
  sharedValue = void 0;
  stateFromStores = void 0;
  const messagesTabLayout = useMessagesTabLayout(panelVariant);
  const styles = useStyles(messagesTabLayout);
  const analyticsLocations = useAnalyticsLocations().analyticsLocations;
  const styles2 = getLayoutStyles(messagesTabLayout);
  const fontScale = useFontScale();
  const stateFromStoresObject = useStateFromStoresObject([AccessibilityStore], () => AccessibilityStore.useReducedMotion);
  const callback = useCallback(() => {
    import("../../user_profile/native/showUserProfileActionSheet").then((result) => (0, result.default)({
      userId: suggestedFriend.user.id,
      localUser: suggestedFriend.user,
      sourceAnalyticsLocations: analyticsLocations,
      location: "Notifications Tab User Profile"
    }));
  }, [suggestedFriend, analyticsLocations]);
  const friendSuggestionName = suggestedFriend.friendSuggestionName;
  const r68 = friendSuggestionName != null && suggestedFriend.friendSuggestionName.length > 0 ? suggestedFriend.friendSuggestionName : UserUtils.getName(suggestedFriend.user);
  const suggestedContactNameForSuggestion = getSuggestedContactNameForSuggestion(r68, suggestedFriend);
  const r5 = suggestedContactNameForSuggestion != null;
  const r33 = r5 ? ` · ${suggestedContactNameForSuggestion}` : "";
  const r32 = suggestedFriend.mutualFriendsCount != null && suggestedFriend.mutualFriendsCount > 0 ? intl.formatToPlainString(t.z7y34b, {
    count: suggestedFriend.mutualFriendsCount
  }) : UserUtils.getName(suggestedFriend.user);
  sharedValue = useSharedValue(false);
  stateFromStores = useStateFromStores([RelationshipStore], () => RelationshipStore.getRelationshipType(suggestedFriend.user.id) === RelationshipTypes.PENDING_OUTGOING);
  useEffect(() => {
    if (!stateFromStores) {
      sharedValue.set(false);
    }
  }, [sharedValue, stateFromStores]);
  const r135 = [<View style={styles.avatar}>
    <Avatar user={suggestedFriend.user} guildId={void 0} size={styles2.icon.avatarSize} animate={!stateFromStoresObject} />
  </View>, <View style={styles.textContainer}>
    <Text lineClamp={1} variant={styles2.channelName.text.variant} color="text-default" style={styles.nameText}>{r68}</Text>
    <View style={{
      marginTop: isAndroid() ? -2 : 0
    }}>
      <ActionStatusSubLabel lineHeight={styles2.messagePreview.height + (isAndroid() ? 2 : 0)} textVariant={styles2.messagePreview.text.variant} actioned={sharedValue} maxFontSizeMultiplier={1.75} label={`${r32}${r33}`} actionStatus={intl.string(t.Kzyxm9)} animate={!stateFromStoresObject} />
    </View>
  </View>, <ContactSuggestionActions user={suggestedFriend.user} added={sharedValue} size={isLayoutCozy(messagesTabLayout) ? "md" : "sm"} onAddSuggestion={(event) => {
    AnalyticsUtils.track(AnalyticEvents.FRIEND_SUGGESTION_ADDED, {
      suggested_user_id: event.id,
      suggestion_source: suggestedFriend.source,
      location: "Notifications Tab"
    });
    onAddSuggestion2(suggestedFriend);
  }} onFinishAnimation={() => {
    onAddSuggestionAnimationFinish(suggestedFriend);
  }} animate={!stateFromStoresObject} />];
  return renderChannelPressableWrapper(<PressableHighlight accessibilityRole="button" underlayColor={styles.rowActive.backgroundColor} onPress={callback} style={[styles.pressable, {
    borderRadius: styles2.container.borderRadius
  }]}>
    {renderChannelWrapper(<>{r135}</>, {
      layout: messagesTabLayout,
      fontScale,
      panelVariant
    })}
  </PressableHighlight>, {
    layout: messagesTabLayout,
    panelVariant
  });
};