// Metro module 8474 (f8475).
import { useCallback, useMemo } from "react";
import { View } from "react-native";
import { createStyles } from "../../../../design/components/Styles/native/createStyles";
import Module712 from "../../../../_bundle/Module712";
import useOpenGameProfileModal from "../../../game_profile/hooks/useOpenGameProfileModal";
import { GameProfileSources } from "../../../game_profile/GameProfileAnalyticUtils";
import GameIcon from "./GameIcon";
import { Text } from "../../../../design/components/Text/native/Text";
import useGuildProfileGames from "../../hooks/useGuildProfileGames";
import { useGuildProfileGameProfilesExperiment } from "../../GuildProfileGameProfilesExperiment.native";
import ToastActionCreators from "../../../toast/native/ToastActionCreators";
import ActionSheetActionCreators from "../../../action_sheet/native/ActionSheetActionCreators";
import { PressableHighlight } from "../../../../design/void/Pressables/native/Pressables";
let useStyles, FavoriteGame, GuildProfileGamesContent;
const ClickableGameIcon = function ClickableGameIcon(props) {
  const { style, game, activityLevel } = props;
  let enabled2 = props.enabled;
  const onPressFallback = props.onPressFallback;
  const openGameProfileModal = useOpenGameProfileModal({
    gameId: game.id,
    source: GameProfileSources.GuildProfileGames,
    trackEntryPointImpression: enabled2
  });
  let c16606_2 = openGameProfileModal;
  if (enabled2) {
    enabled2 = openGameProfileModal != null;
  }
  let c16606_3 = enabled2;
  const callback2 = useCallback(() => {
    if (c16606_3) {
      c16606_2();
    } else if (onPressFallback != null) {
      onPressFallback(game);
    }
  }, [enabled2, openGameProfileModal, onPressFallback, game]);
  return <GameIcon style={style} game={game} activityLevel={activityLevel} onPress={enabled2 ? callback2 : onPressFallback != null ? callback2 : void 0} />;
};
FavoriteGame = function FavoriteGame(props) {
  const { game: game2, activityLevel, clickable } = props;
  return <View style={useStyles().favoriteGame}>
    <ClickableGameIcon game={game2} activityLevel={activityLevel} enabled={clickable} />
    <Text variant="text-sm/medium" color="text-subtle">{game2.name}</Text>
  </View>;
};
GuildProfileGamesContent = function GuildProfileGamesContent(props) {
  let callback;
  const { profile, gamesToDisplay, lastGameToDisplay, remainingGames } = props;
  callback = void 0;
  const styles = useStyles();
  const gameActivity = profile.gameActivity;
  const enabled = useGuildProfileGameProfilesExperiment({
    location: "guild_profile_games"
  }).enabled;
  const r26 = (lastGameToDisplay == null ? void 0 : lastGameToDisplay.getIconURL(24)) != null;
  let c16607_6 = r26;
  const memo = useMemo(() => lastGameToDisplay == null ? null : c16607_6 ? remainingGames.length === 0 ? <ClickableGameIcon game={lastGameToDisplay} activityLevel={gameActivity[lastGameToDisplay.id]} enabled={enabled} /> : <View style={styles.lastItem}>
    <GameIcon style={styles.lastItemImage} game={lastGameToDisplay} activityLevel={gameActivity[lastGameToDisplay.id]} />
    <View style={styles.lastItemOverlay} />
    <View style={styles.lastItemText}>
      <Text variant="text-xs/medium" color="text-overlay-light">
        {`+${remainingGames.length}`}
      </Text>
    </View>
  </View> : null, [lastGameToDisplay, r26, remainingGames, gameActivity, styles, enabled]);
  callback = useCallback((a0) => {
    ToastActionCreators.open({
      key: `profile-game-${a0.id}`,
      content: a0.name
    });
  }, []);
  const r36 = remainingGames.length > 0;
  const callback2 = useCallback(() => {
    ActionSheetActionCreators.openLazy(import("./GuildProfileGamesActionSheet"), "GuildProfileGamesActionSheet{profile.id}", {
      profile
    }, "stack");
  }, [profile]);
  return gamesToDisplay.length === 1 ? <View style={styles.container}>
    <FavoriteGame game={gamesToDisplay[0]} activityLevel={gameActivity[gamesToDisplay[0].id]} clickable={enabled} />
  </View> : r36 ? <PressableHighlight style={styles.container} onPress={callback2}>
    {gamesToDisplay.map((item) => <GameIcon key={item.id} game={item} activityLevel={gameActivity[item.id]} />)}
    {memo}
  </PressableHighlight> : <View style={styles.container}>
    {gamesToDisplay.map((item) => <ClickableGameIcon key={item.id} game={item} activityLevel={gameActivity[item.id]} enabled={enabled} onPressFallback={callback} />)}
    {memo}
  </View>;
};
useStyles = createStyles({
  container: {
    display: "flex",
    flexDirection: "row",
    gap: 8
  },
  favoriteGame: {
    display: "flex",
    flexDirection: "row",
    alignItems: "center",
    gap: 8
  },
  lastItem: {
    position: "relative",
    width: 32,
    height: 32
  },
  lastItemOverlay: {
    position: "absolute",
    top: 0,
    left: 0,
    right: 0,
    bottom: 0,
    backgroundColor: Module712.colors.BACKGROUND_SCRIM,
    borderRadius: Module712.radii.xs
  },
  lastItemImage: {
    position: "absolute"
  },
  lastItemText: {
    display: "flex",
    justifyContent: "center",
    alignItems: "center",
    width: 32,
    height: 32
  }
});
export default function GuildProfileGames(props) {
  const profile2 = props.profile;
  const guildProfileGames = useGuildProfileGames(profile2);
  const { gamesToDisplay, lastGameToDisplay: lastGameToDisplay2, remainingGames: remainingGames2 } = guildProfileGames;
  return gamesToDisplay == null ? null : gamesToDisplay.length !== 0 ? <GuildProfileGamesContent profile={profile2} gamesToDisplay={gamesToDisplay} lastGameToDisplay={lastGameToDisplay2} remainingGames={remainingGames2} /> : null;
};
export { useStyles };