// Metro module 13927 (f13928).
import { useCallback } from "react";
import { View } from "react-native";
import UserStore from "../../../stores/UserStore";
import FamilyCenterStore from "../FamilyCenterStore";
import { createStyles } from "../../../design/components/Styles/native/createStyles";
import Module712 from "../../../_bundle/Module712";
import { useStateFromStores } from "../../../_bundle/defaultAreStatesEqual";
import ActionSheetActionCreators from "../../action_sheet/native/ActionSheetActionCreators";
import TouchableHitBox from "../../../design/void/TouchableHitBox/native/TouchableHitBox";
import { intl } from "../../../intl/index.native";
import FamilyCenter_messages from "../FamilyCenter.messages";
import { Text } from "../../../design/components/Text/native/Text";
import { Avatar, AvatarSizes } from "../../../design/void/native";
import GuildIcon, { GuildIconSizes } from "../../guild/native/GuildIcon";
const useStyles = createStyles({
  container: {
    display: "flex",
    flexDirection: "row",
    flexWrap: "wrap",
    gap: Module712.space.PX_8
  },
  section: {
    flex: 1
  },
  avatarList: {
    display: "flex",
    flexDirection: "row",
    gap: Module712.space.PX_4,
    flexWrap: "wrap",
    paddingTop: Module712.space.PX_12,
    paddingBottom: Module712.space.PX_12
  },
  touchableHitBox: {
    width: "100%",
    alignItems: "flex-start"
  },
  guildAvatar: {
    borderRadius: Module712.radii.md,
    borderColor: Module712.colors.BACKGROUND_BASE_LOW,
    backgroundColor: Module712.colors.BACKGROUND_SURFACE_HIGHEST
  },
  guildAvatarText: {
    fontSize: 12
  }
});
export default function FamilyCenterTopActivity() {
  let r41;
  let styles, stateFromStores, stateFromStores2;
  L7: {
    styles = useStyles();
    stateFromStores = useStateFromStores([FamilyCenterStore], () => FamilyCenterStore.getTopUserActivities());
    stateFromStores2 = useStateFromStores([FamilyCenterStore], () => FamilyCenterStore.getTopGuildActivities());
    const callback2 = useCallback(() => {
      ActionSheetActionCreators.openLazy(import("./FamilyCenterTopUsersBottomSheet"), "FamilyCenterTopUsers", {
        topUserActivities: stateFromStores
      });
    }, [stateFromStores]);
    const callback = useCallback(() => {
      ActionSheetActionCreators.openLazy(import("./FamilyCenterTopServersBottomSheet"), "FamilyCenterTopServers", {
        topGuildActivities: stateFromStores2
      });
    }, [stateFromStores2]);
    if (stateFromStores.length === 0) {
      const length = stateFromStores2.length;
      r41 = null;
      if (length === 0) {
        break L7;
      }
    }
    r41 = <View style={styles.container}>
      {stateFromStores.length > 0 && <View style={styles.section}>
        <TouchableHitBox style={styles.touchableHitBox} onPress={callback2} accessibilityRole="button" accessibilityLabel={intl.string(FamilyCenter_messages.BxbvS7)}>
          <Text variant="text-sm/semibold">
            {intl.string(FamilyCenter_messages.BxbvS7)}
          </Text>
          <View style={styles.avatarList}>
            {stateFromStores.map((stateFromStore) => {
              const user = UserStore.getUser(stateFromStore.user_id);
              return user != null ? <Avatar key={user.id} user={user} size={AvatarSizes.SMALL} guildId={void 0} /> : null;
            })}
          </View>
        </TouchableHitBox>
      </View>}
      {stateFromStores2.length > 0 && <View style={styles.section}>
        <TouchableHitBox style={styles.touchableHitBox} onPress={callback} accessibilityRole="button" accessibilityLabel={intl.string(FamilyCenter_messages.Lq9Set)}>
          <Text variant="text-sm/semibold">
            {intl.string(FamilyCenter_messages.Lq9Set)}
          </Text>
          <View style={styles.avatarList}>
            {stateFromStores2.map((item) => {
              const guild = FamilyCenterStore.getGuild(item.guild_id);
              return guild != null ? <GuildIcon key={guild.id} style={styles.guildAvatar} textStyle={styles.guildAvatarText} guild={guild} size={GuildIconSizes.SMALL} /> : null;
            })}
          </View>
        </TouchableHitBox>
      </View>}
    </View>;
  }
  return r41;
};