discord-decomp/components_native/common/UserSummaryItem.tsx

// Metro module 10017 (f10018).
import { View } from "react-native";
import GuildMemberStore from "../../stores/GuildMemberStore";
import { jsx } from "react/jsx-runtime";
import { createStyles } from "../../design/components/Styles/native/createStyles";
import Module712 from "../../_bundle/Module712";
import { CutoutDirection, AvatarSizes, AVATAR_SIZE_MAP, CutoutableAvatarImage, LegacyText } from "../../design/void/native";
import { useStateFromStores } from "../../_bundle/Module589";
import AvatarUtils from "../../utils/AvatarUtils";
import NicknameUtils from "../../utils/NicknameUtils";
import { intl, t } from "../../intl/index.native";
import { Text } from "../../design/components/Text/native/Text";
let env6662 = {};
const useStyles = createStyles({
  container: {
    flexDirection: "row"
  },
  names: {
    marginStart: 4,
    paddingRight: 1
  },
  namesLegacy: {
    marginStart: 4,
    paddingRight: 1,
    color: Module712.colors.TEXT_SUBTLE
  },
  plusCountContainer: {
    backgroundColor: Module712.colors.BACKGROUND_BASE_LOWEST,
    marginStart: 2,
    alignItems: "center"
  },
  cutout: {
    marginRight: -4
  }
});
const c6662_7 = {
  direction: CutoutDirection.RIGHT
};
export default function UserSummaryItem(props) {
  const { style, namesStyle, namesVariant, max = 3 } = props;
  let env17626 = {
    $parent: env6662
  };
  const users = props.users;
  env17626[0] = users;
  const { renderedUsers = [], withNames, channelId, guildId } = props;
  env17626[1] = guildId;
  let avatarSize = props.avatarSize;
  if (avatarSize === void 0) {
    avatarSize = AvatarSizes.XXSMALL;
  }
  env17626[2] = avatarSize;
  const { withPlusCount, cutout = c6662_7, cutoutStyle } = props;
  env17626[3] = void 0;
  const styles = useStyles();
  const r44 = renderedUsers.length > 0 ? renderedUsers.length : users.length;
  const r23 = Math.min(r44, max);
  const r22 = {};
  env17626[3] = r22;
  useStateFromStores([GuildMemberStore], () => env17626[0].forEach((item) => {
    const r7 = env17626[1];
    if (r7 != null && item != null) {
      env17626[3][item.id] = GuildMemberStore.getMember(r7, item.id);
    }
  }));
  if (r23 === 0) {
    return null;
  }
  const children = [];
  const r9 = 0 < r23;
  let r0 = 0;
  let r1 = 0;
  if (r9) {
    do {
      const r5 = r23 - 1;
      const length = renderedUsers.length;
      const r2 = r0;
      const r4 = r1;
      if (length === 0) {
        let c17627_1;
        const r34 = users[r2];
        let c17627_0 = r34;
        let r36 = r34?.id;
        if (r36 == null) {
          r36 = `@${r2}`;
        }
        let source = AvatarUtils.makeSource(null);
        if (r34 != null) {
          c17627_1 = r22[r34.id];
          source = function u(r5 = false) {
            const avatarURL = c17627_0.getAvatarURL(env17626[1], AVATAR_SIZE_MAP[env17626[2]], r5);
            const r2 = c17627_1 == null;
            const r19 = r5;
            const r20 = r2 ? void 0 : c17627_1.avatar;
            let r21 = avatarURL;
            if (r20 != null) {
              let r26 = AvatarUtils.getGuildMemberAvatarURL(c17627_1, r19);
              if (r26 == null) {
                r26 = avatarURL;
              }
              r21 = r26;
            }
            return AvatarUtils.makeSource(r21);
          };
        }
        if (r2 < r5) {
          children.push((0, jsx)(CutoutableAvatarImage, {
            size: avatarSize,
            source,
            style: [styles.cutout, cutoutStyle],
            cutout
          }, r36));
        } else {
          children.push((0, jsx)(CutoutableAvatarImage, {
            size: avatarSize,
            source
          }, r36));
        }
      } else {
        children.push(renderedUsers[r2]);
      }
      r0 = r4 + 1;
      r1 = r0;
    } while (r1 < r23);
  }
  const name = NicknameUtils.getName(guildId, channelId, users[0]);
  const children2 = withNames && users.length > 1 ? intl.formatToPlainString(t.GhkJ21, {
    name,
    count: users.length - 1
  }) : name;
  if (withNames && users[0] != null) {
    const r115 = `username-${children2}`;
    if (namesVariant != null) {
      children.push((0, jsx)(Text, {
        variant: namesVariant,
        color: "redesign-channel-name-muted-text",
        style: [styles.names, namesStyle],
        lineClamp: 1,
        children: children2
      }, r115));
    } else {
      children.push((0, jsx)(LegacyText, {
        style: [styles.namesLegacy, namesStyle],
        numberOfLines: 1,
        children: children2
      }, r115));
    }
  }
  if (r44 > max && withPlusCount) {
    children.pop();
    const r143 = "+" + (r44 + 1 - max);
    const borderRadius = AVATAR_SIZE_MAP[avatarSize];
    children.push(<View key={`plus-${r143}`} style={[styles.plusCountContainer, {
      borderRadius,
      width: borderRadius,
      height: borderRadius,
      padding: borderRadius / 8
    }]}>
      <Text variant="text-xs/normal" color="mobile-text-heading-primary">{r143}</Text>
    </View>);
  }
  return (0, jsx)(View, {
    style: [style, styles.container],
    children
  });
};