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

// Metro module 8516 (f8517).
import { useState, useMemo, useCallback } from "react";
import { Image as Image2, View } from "react-native";
import { createStyles } from "../../../../design/components/Styles/native/createStyles";
import Module712 from "../../../../_bundle/Module712";
import ReanimatedRexport, { useSharedValue, useAnimatedStyle } from "../../../reanimated/ReanimatedRexport";
import { getGenreText } from "../../../../utils/SKUUtils";
import Module4611 from "../../../../_bundle/Module4611";
import GameProfileRankPill from "./GameProfileRankPill";
import { Text } from "../../../../design/components/Text/native/Text";
const useStyles = createStyles({
  container: {
    backgroundColor: Module712.colors.BACKGROUND_BASE_LOWEST
  },
  artHero: {
    width: "100%",
    position: "absolute",
    top: 0,
    bottom: -Module712.space.PX_80,
    left: 0,
    right: 0
  },
  artHeroImage: {
    height: "100%",
    width: "100%",
    resizeMode: "cover"
  },
  artHeroGradient: {
    position: "absolute",
    top: 0,
    bottom: 0,
    left: 0,
    right: 0
  },
  headerContent: {
    paddingTop: Module712.space.PX_32,
    paddingHorizontal: Module712.space.PX_16,
    gap: Module712.space.PX_12,
    flexDirection: "row",
    alignItems: "flex-end",
    maxWidth: 520,
    alignSelf: "center",
    width: "100%"
  },
  shadowContainer: {
    borderRadius: Module712.radii.sm,
    ...Module712.shadows.SHADOW_LOW
  },
  coverContainer: {
    width: 85,
    height: 114,
    borderRadius: Module712.radii.sm,
    backgroundColor: Module712.colors.BACKGROUND_BASE_LOW,
    overflow: "hidden"
  },
  iconContainer: {
    width: 85,
    height: 85,
    borderRadius: Module712.radii.sm,
    backgroundColor: Module712.colors.BACKGROUND_BASE_LOW,
    overflow: "hidden"
  },
  image: {
    width: "100%",
    height: "100%"
  },
  titleContainer: {
    flex: 1,
    flexDirection: "column",
    alignItems: "flex-start"
  },
  textShadow: {
    textShadowColor: Module712.colors.BLACK,
    textShadowOffset: {
      width: 0,
      height: 0
    },
    textShadowRadius: 1
  }
});
const __initData = {
  code: "function GameProfileHeaderTsx1(){const{effectiveScrollY}=this.__closure;return{top:-Math.max(0,-effectiveScrollY.get())};}"
};
export default function GameProfileHeader(props) {
  let sharedValue;
  const game = props.game;
  let scrollY = props.scrollY;
  const onHeightMeasured = props.onHeightMeasured;
  sharedValue = void 0;
  const styles = useStyles();
  const [state] = useState(() => Math.random());
  const sharedValue2 = useSharedValue(0);
  if (scrollY == null) {
    scrollY = sharedValue2;
  }
  sharedValue = scrollY;
  const _ = function _() {
    return {
      top: -Math.max(0, -sharedValue.get())
    };
  };
  _.__closure = {
    effectiveScrollY: sharedValue
  };
  _.__workletHash = 1177397229282;
  _.__initData = __initData;
  const animatedStyle = useAnimatedStyle(_);
  const name = game?.name;
  const r43 = game == null ? void 0 : game.genres.map(getGenreText).join(", ");
  const l30Rank = game?.l30Rank;
  const memo = useMemo(() => {
    let r3 = game == null ? void 0 : game.getBannerURL(1024);
    if (r3 == null) {
      r3 = game?.screenshotUrls != null ? game.screenshotUrls.length > 0 ? game.screenshotUrls[Math.floor(state * game.screenshotUrls.length)] : null : null;
    }
    return r3;
  }, [game, state]);
  const memo2 = useMemo(() => game == null ? void 0 : game.getCoverURL(114), [game]);
  const memo3 = useMemo(() => game == null ? void 0 : game.getIconURL(114), [game]);
  const props2 = {
    style: styles.container,
    onLayout: useCallback((a0) => {
      if (onHeightMeasured != null) {
        onHeightMeasured(a0.nativeEvent.layout.height);
      }
    }, [onHeightMeasured]),
    children: null
  };
  props2.children = [<ReanimatedRexport.View style={[styles.artHero, animatedStyle]}>
    {memo != null && <Image2 source={{
      uri: memo
    }} style={styles.artHeroImage} />}
    <Module4611 colors={["rgba(0,0,0,0.3)", styles.container.backgroundColor]} style={styles.artHeroGradient} />
  </ReanimatedRexport.View>, <View style={styles.headerContent}>
    <View style={styles.shadowContainer}>
      <View {...memo2 != null ? {
        style: styles.coverContainer,
        children: <Image2 source={{
          uri: memo2
        }} style={styles.image} />
      } : {
        style: styles.iconContainer,
        children: memo3 != null && <Image2 source={{
          uri: memo3
        }} style={styles.image} />
      }} />
    </View>
    <View style={styles.titleContainer}>
      {l30Rank != null && <GameProfileRankPill rank={l30Rank} />}
      <Text variant="heading-xxl/semibold" color="text-overlay-light" lineClamp={2} style={styles.textShadow}>{name}</Text>
      {r43 != null ? r43 !== "" ? <Text variant="text-md/normal" color="text-overlay-light" lineClamp={2} style={styles.textShadow}>{r43}</Text> : null : null}
    </View>
  </View>];
  return <View {...props2} />;
};