discord-decomp/modules/game_profile/native/components/GameProfileSimilarGames.tsx

// Metro module 11922 (f11923).
import { useCallback } from "react";
import { Image as Image2, Pressable, View } from "react-native";
import Module712 from "../../../../_bundle/Module712";
import { createStyles } from "../../../../design/components/Styles/native/createStyles";
import useShouldOpenGameProfileModal from "../../hooks/useShouldOpenGameProfileModal";
import { GameProfileSources, GameProfileTrackActionActions } from "../../GameProfileAnalyticUtils";
import GameProfileActionCreators_native from "../../GameProfileActionCreators.native";
import { intl, t } from "../../../../intl/index.native";
import { Text } from "../../../../design/components/Text/native/Text";
import { GameProfileSimilarGamesMobileExperiment } from "../../SimilarGamesExperiments";
import useSimilarGames from "../../hooks/useSimilarGames";
import useWindowDimensions_native from "../../../screen/useWindowDimensions.native";
import { FlashList } from "../../../../_bundle/noop_6676";
let PX_12, PX_16, PX_122, useStyles, ListPadding, SimilarGameCard, LoadingCard;
const Spacer = function Spacer() {
  return <View style={{
    width: PX_12
  }} />;
};
ListPadding = function ListPadding() {
  return <View style={{
    width: Module712.space.PX_16
  }} />;
};
SimilarGameCard = function SimilarGameCard(props) {
  const { game, trackAction, cardWidth: cardWidth2 } = props;
  const styles = useStyles();
  const height = 1.34 * cardWidth2;
  const coverURL = game.getCoverURL(Math.ceil(height));
  const r10 = {
    width: cardWidth2,
    height
  };
  const shouldOpenGameProfileModal = useShouldOpenGameProfileModal({
    gameId: game.id,
    source: GameProfileSources.SimilarGames
  });
  const { shouldOpenGameProfile, gameId } = shouldOpenGameProfileModal;
  return <Pressable style={[styles.card, {
    width: cardWidth2
  }]} onPress={useCallback(() => {
    trackAction(GameProfileTrackActionActions.ClickSimilarGame, game.id);
    let r14 = shouldOpenGameProfile;
    if (shouldOpenGameProfile) {
      r14 = gameId != null;
    }
    if (r14) {
      GameProfileActionCreators_native.openGameProfileModal({
        gameId,
        gameProfileModalChecks: {
          shouldOpenGameProfile: true,
          gameId
        },
        source: GameProfileSources.SimilarGames
      });
    }
  }, [game.id, trackAction, shouldOpenGameProfile, gameId])} accessibilityRole="button" accessibilityLabel={intl.formatToPlainString(t["8QLQB+"], {
    gameName: game.name
  })}>
    {coverURL != null ? <Image2 source={{
      uri: coverURL
    }} style={[styles.coverArt, r10]} /> : <View style={[styles.coverArtFallback, r10]}>
      <Text variant="text-xs/medium" color="text-overlay-light" lineClamp={3}>{game.name}</Text>
    </View>}
  </Pressable>;
};
LoadingCard = function LoadingCard(props) {
  const cardWidth2 = props.cardWidth;
  return <View style={{
    width: cardWidth2
  }}>
    <View style={[useStyles().loadingArt, {
      width: cardWidth2,
      height: 1.34 * cardWidth2
    }]} />
  </View>;
};
PX_12 = Module712.space.PX_12;
PX_16 = Module712.space.PX_16;
PX_122 = Module712.space.PX_12;
useStyles = createStyles({
  container: {
    gap: Module712.space.PX_8,
    marginHorizontal: -1 * Module712.space.PX_16
  },
  header: {
    paddingHorizontal: Module712.space.PX_16
  },
  card: {
    gap: Module712.space.PX_4
  },
  coverArt: {
    borderRadius: Module712.radii.sm
  },
  coverArtFallback: {
    borderRadius: Module712.radii.sm,
    backgroundColor: Module712.colors.BACKGROUND_SURFACE_HIGH,
    justifyContent: "center",
    alignItems: "center",
    padding: Module712.space.PX_8
  },
  loadingArt: {
    borderRadius: Module712.radii.sm,
    backgroundColor: Module712.colors.BACKGROUND_SURFACE_HIGH
  }
});
export default function GameProfileSimilarGames(props) {
  const { gameId: gameId2, trackAction: trackAction2 } = props;
  const styles = useStyles();
  const config = GameProfileSimilarGamesMobileExperiment.useConfig({
    location: "GameProfileSimilarGames"
  });
  const { enabled, dense } = config;
  const similarGames2 = useSimilarGames(gameId2, enabled);
  const { isFetching, similarGames } = similarGames2;
  const length = dense ? 4 : 3;
  const cardWidth = (useWindowDimensions_native().width - 2 * PX_16 - (length - 1) * PX_12 - PX_122) / length;
  const data = Array.from({
    length
  }, (a0, a1) => a1);
  return isFetching ? <View style={styles.container}>
    <View style={styles.header}>
      <Text variant="heading-sm/semibold" color="mobile-text-heading-primary">
        {intl.string(t["6rLyQB"])}
      </Text>
    </View>
    <FlashList horizontal data={data} renderItem={() => <LoadingCard cardWidth={cardWidth} />} showsHorizontalScrollIndicator={false} ItemSeparatorComponent={Spacer} ListHeaderComponent={ListPadding} ListFooterComponent={ListPadding} />
  </View> : similarGames.length !== 0 ? <View style={styles.container}>
    <View style={styles.header}>
      <Text variant="heading-sm/semibold" color="mobile-text-heading-primary">
        {intl.string(t["6rLyQB"])}
      </Text>
    </View>
    <FlashList horizontal data={similarGames} renderItem={(info) => <SimilarGameCard game={info.item} trackAction={trackAction2} cardWidth={cardWidth} />} showsHorizontalScrollIndicator={false} ItemSeparatorComponent={Spacer} ListHeaderComponent={ListPadding} ListFooterComponent={ListPadding} decelerationRate="fast" snapToInterval={cardWidth + PX_12} />
  </View> : null;
};