// Metro module 13929 (f13930).
import FamilyCenterStore from "../FamilyCenterStore";
import { createStyles } from "../../../design/components/Styles/native/createStyles";
import Module712 from "../../../_bundle/Module712";
import { useStateFromStores } from "../../../_bundle/Module589";
import { getTopUserOrGuildDescription } from "../FamilyCenterUtils";
import { TableRow } from "../../../design/components/TableRow/native/TableRow.native";
import GuildIcon from "../../guild/native/GuildIcon";
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 GuildRow = function GuildRow(props) {
  const guildActivity = props.guildActivity;
  const styles = useStyles();
  const stateFromStores = useStateFromStores([FamilyCenterStore], () => FamilyCenterStore.getGuild(guildActivity.guild_id));
  if (stateFromStores == null) {
    return null;
  }
  return <TableRow label={stateFromStores.name} subLabel={getTopUserOrGuildDescription(guildActivity.messages_sent, guildActivity.call_count)} icon={<GuildIcon guild={stateFromStores} style={styles.guildIcon} />} />;
};
useStyles = createStyles({
  header: {
    textAlign: "center"
  },
  guildIcon: {
    borderRadius: Module712.radii.md,
    borderColor: Module712.colors.BACKGROUND_BASE_LOW,
    backgroundColor: Module712.colors.BACKGROUND_BASE_LOWEST
  }
});
export default function FamilyCenterTopGuildsBottomSheet(props) {
  const topGuildActivities = props.topGuildActivities;
  return <ActionSheet>
    <Text variant="text-md/bold" style={useStyles().header}>
      {intl.string(FamilyCenter_messages.Lq9Set)}
    </Text>
    <TableRowGroup hasIcons>
      {topGuildActivities.map((topGuildActivity) => <GuildRow key={topGuildActivity.guild_id} guildActivity={topGuildActivity} />)}
    </TableRowGroup>
  </ActionSheet>;
};