// Metro module 13928 (f13929).
import UserStore from "../../../stores/UserStore";
import { createStyles } from "../../../design/components/Styles/native/createStyles";
import { getTopUserOrGuildDescription } from "../FamilyCenterUtils";
import { TableRow } from "../../../design/components/TableRow/native/TableRow.native";
import UserUtils from "../../../utils/UserUtils";
import { Avatar, AvatarSizes } from "../../../design/void/native";
import { ActionSheet } from "../../../design/components/Sheet/native/ActionSheet.native";
import { Text } from "../../../design/components/Text/native/Text";
import { intl } from "../../../intl/index.native";
import FamilyCenter_messages from "../FamilyCenter.messages";
import { TableRowGroup } from "../../../design/components/TableRow/native/TableRowGroup.native";
let useStyles;
const UserRow = function UserRow(props) {
  const userActivity = props.userActivity;
  const user = UserStore.getUser(userActivity.user_id);
  if (user == null) {
    return null;
  }
  const topUserOrGuildDescription = getTopUserOrGuildDescription(userActivity.dms_sent, userActivity.call_count);
  return <TableRow label={UserUtils.getName(user)} subLabel={topUserOrGuildDescription} icon={<Avatar size={AvatarSizes.SMALL} user={user} guildId={void 0} />} />;
};
useStyles = createStyles({
  header: {
    textAlign: "center"
  }
});
export default function FamilyCenterTopUsersBottomSheet(props) {
  const topUserActivities = props.topUserActivities;
  return <ActionSheet>
    <Text variant="text-md/bold" style={useStyles().header}>
      {intl.string(FamilyCenter_messages.BxbvS7)}
    </Text>
    <TableRowGroup hasIcons>
      {topUserActivities.map((topUserActivity) => <UserRow key={topUserActivity.user_id} userActivity={topUserActivity} />)}
    </TableRowGroup>
  </ActionSheet>;
};