discord-decomp/modules/contact_sync/native/components/ContactSyncSuggestions.tsx

// Metro module 11789 (f11790).
import * as Module19 from "react";
import { useState, useCallback, useMemo } from "react";
import { View } from "react-native";
import { AnalyticEvents } from "../../../../Constants";
import { SuggestedFriendSource } from "../../../main_tabs_v2/native/friends/screens/FriendsScreenConstants";
import { createStyles } from "../../../../design/components/Styles/native/createStyles";
import Module712 from "../../../../_bundle/Module712";
import { NAV_BAR_HEIGHT } from "../../../../design/components/Navigator/native/NavigatorConstants.native";
import { useFontScale } from "../../../screen/native/useFontScale";
import { Text } from "../../../../design/components/Text/native/Text";
import { getUserTag } from "../../../../utils/UserUtils";
import AvatarUtils from "../../../../utils/AvatarUtils";
import { TableCheckboxRow } from "../../../../design/components/TableRow/native/TableCheckboxRow.native";
import { Avatar, AvatarSizes } from "../../../../design/void/native";
import { intl, t } from "../../../../intl/index.native";
import { useToken } from "../../../../design/tokens/native/useToken";
import { hexOpacityToRgba } from "../../../../utils/ColorUtils";
import SnowflakeUtils from "../../../../utils/SnowflakeUtils";
import { FormDivider } from "../../../../design/void/Form/native/index";
import { FlashList } from "../../../../_bundle/noop_6676";
import Module4611 from "../../../../_bundle/Module4611";
import { VerticalGradient } from "../../../../ConstantsIOS";
import { Button } from "../../../../design/components/Button/native/Button.native";
import AnalyticsUtils from "../../../../utils/AnalyticsUtils";
let useStyles, SuggestionRow;
const SuggestedFriendsSectionHeader = function SuggestedFriendsSectionHeader(props) {
  const label = props.label;
  return <View style={useStyles().sectionHeader}>
    <Text color="text-muted" variant="text-sm/semibold">{label}</Text>
  </View>;
};
SuggestionRow = function SuggestionRow(props) {
  const { start, end, suggestion, selected, onSelect } = props;
  const name = suggestion.reasons[0]?.name;
  const userTag = getUserTag(suggestion.suggested_user);
  const label = name != null ? name !== "" ? name : userTag : userTag;
  return <TableCheckboxRow start={start} end={end} icon={<Avatar source={AvatarUtils.getUserAvatarSource(suggestion.suggested_user)} size={AvatarSizes.REFRESH_MEDIUM_32} />} checked={selected} label={label} subLabel={<>
    <Text variant="text-xs/medium" color="text-muted">{userTag}</Text>
    {suggestion.mutual_friends_count != null && <Text variant="text-xs/medium" color="text-muted">
      {intl.format(t.z7y34b, {
        count: suggestion.mutual_friends_count
      })}
    </Text>}
  </>} onPress={() => onSelect(suggestion.suggested_user.id)} />;
};
useStyles = createStyles({
  container: {
    flex: 1,
    backgroundColor: Module712.colors.BACKGROUND_BASE_LOWER,
    paddingTop: NAV_BAR_HEIGHT + 32,
    justifyContent: "center"
  },
  header: {
    alignItems: "center",
    paddingTop: Module712.space.PX_16,
    paddingBottom: Module712.space.PX_24
  },
  title: {
    marginBottom: 8,
    textAlign: "center"
  },
  subtitle: {
    lineHeight: 18,
    textAlign: "center"
  },
  list: {
    flex: 1,
    marginTop: Module712.space.PX_12
  },
  divider: {
    backgroundColor: Module712.colors.BORDER_SUBTLE
  },
  linearGradient: {
    position: "absolute",
    width: "100%",
    bottom: 0,
    minHeight: 136
  },
  redesignButton: {
    position: "absolute",
    width: "100%",
    bottom: 0,
    padding: Module712.space.PX_16,
    paddingBottom: Module712.space.PX_32
  },
  sectionHeader: {
    marginBottom: Module712.space.PX_8,
    flexDirection: "row",
    alignItems: "center",
    justifyContent: "space-between"
  }
});
export default function ContactSyncSuggestions(props) {
  let state, setState, callback;
  const { friendSuggestions, onSubmit } = props;
  state = void 0;
  setState = void 0;
  callback = void 0;
  const styles = useStyles();
  const r26 = friendSuggestions.reduce((acc, friendSuggestion) => {
    acc[friendSuggestion.suggested_user.id] = true;
    return acc;
  }, {});
  const token = useToken(Module712.colors.BACKGROUND_BASE_LOW);
  const colors = [hexOpacityToRgba(token, 0), hexOpacityToRgba(token, 100)];
  [state, setState] = useState(r26);
  const paddingBottom = Module712.space.PX_16 + Module712.space.PX_32 + 40 + Math.max(18 * Math.min(useFontScale(), 2) - 18, 0);
  callback = useCallback((a0) => {
    const r1 = {
      ...state
    };
    r1[a0] = !state[a0];
    setState(r1);
  }, [state]);
  const r80 = SnowflakeUtils.keys(state).some((item) => state[item]);
  return <View style={[styles.container, styles.list]}>
    <FlashList contentContainerStyle={{
      paddingHorizontal: Module712.space.PX_16,
      paddingBottom
    }} data={useMemo(() => {
      const r0 = [];
      let c27164_0 = r0;
      r0.push({
        type: "header"
      });
      friendSuggestions.forEach((a0) => {
        c27164_0.push({
          type: "suggestedFriend",
          props: {
            friendSuggestion: a0,
            selected: state[a0.suggested_user.id]
          }
        });
      });
      return r0;
    }, [friendSuggestions, state])} renderItem={useCallback(({ item, index }) => {
      if (item.type === "header") {
        return <>
          <View style={styles.header}>
            <Text style={styles.title} accessibilityRole="header" variant="heading-xl/extrabold" color="mobile-text-heading-primary">
              {intl.string(t["7Fjv54"])}
            </Text>
            <Text style={styles.subtitle} variant="text-sm/medium" color="text-default">
              {intl.string(t.ait1x0)}
            </Text>
          </View>
          <SuggestedFriendsSectionHeader label={intl.string(t["1uAmCw"])} />
        </>;
      }
      const friendSuggestion = item.props.friendSuggestion;
      return <Module19.Fragment key={friendSuggestion.suggested_user.id}>
        <SuggestionRow start={index === 1} end={index === friendSuggestions.length} suggestion={friendSuggestion} selected={item.props.selected} onSelect={callback} />
        {index < friendSuggestions.length ? <FormDivider iconPush style={styles.divider} /> : null}
      </Module19.Fragment>;
    }, [friendSuggestions.length, styles.divider, styles.header, styles.subtitle, styles.title, callback])} />
    <Module4611 style={styles.linearGradient} start={VerticalGradient.START} end={VerticalGradient.END} pointerEvents="none" colors={colors} />
    <View style={styles.redesignButton}>
      <Button variant="primary" size="lg" text={intl.string(t["J5/69j"])} onPress={function onPress() {
        const r12 = SnowflakeUtils.keys(state).filter((item) => state[item]);
        onSubmit(r12);
        r12.forEach((item) => {
          AnalyticsUtils.track(AnalyticEvents.FRIEND_SUGGESTION_ADDED, {
            suggested_user_id: item,
            suggestion_source: SuggestedFriendSource.USER_SUGGESTIONS,
            location: "Contact Sync Suggestions"
          });
        });
      }} disabled={!r80} />
    </View>
  </View>;
};