// Metro module 11946 (f11947).
import { useEffect, useMemo } from "react";
import { Image as Image2, StyleSheet, 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 { withTiming } from "../../../../design/animation/reanimated/timing/timing";
import { SUPPORTS_WEBP } from "../../../../utils/AvatarUtils";
import { BackgroundBlurFill } from "../../../../design/components/experimental/native";
import { Heading } from "../../../../design/components/Text/native/Text";
import GameProfileRankPill from "./GameProfileRankPill";
const useStyles = createStyles({
  headerContainer: {
    height: 56,
    paddingHorizontal: Module712.space.PX_16,
    borderBottomWidth: StyleSheet.hairlineWidth,
    borderBottomColor: Module712.colors.BORDER_SUBTLE,
    overflow: "hidden",
    justifyContent: "center"
  },
  headerRow: {
    flexDirection: "row",
    alignItems: "center",
    gap: Module712.space.PX_8
  },
  icon: {
    width: 32,
    height: 32,
    borderRadius: Module712.radii.sm
  },
  titleContainer: {
    flex: 1,
    flexDirection: "row",
    alignItems: "center",
    gap: Module712.space.PX_8,
    minWidth: 0
  },
  headerRight: {
    flexDirection: "row",
    alignItems: "center"
  },
  rankPillContainer: {
    flex: 1,
    flexDirection: "row",
    alignItems: "center"
  }
});
const __initData = {
  code: "function GameProfileNavigationHeaderTsx1(){const{headerRightProgress}=this.__closure;return{opacity:headerRightProgress.get()};}"
};
const __initData2 = {
  code: "function GameProfileNavigationHeaderTsx2(){const{headerRightProgress}=this.__closure;return{opacity:1-headerRightProgress.get()};}"
};
export default function GameProfileNavigationHeader(props) {
  const { game, application, headerRight } = props;
  const styles = useStyles();
  const r4 = headerRight != null;
  let c19280_2 = r4;
  const sharedValue = useSharedValue(r4 ? 1 : 0);
  useEffect(() => {
    sharedValue.set(withTiming(c19280_2 ? 1 : 0, {
      duration: 200
    }));
  }, [r4, sharedValue]);
  const x = () => ({
    opacity: sharedValue.get()
  });
  x.__closure = {
    headerRightProgress: sharedValue
  };
  x.__workletHash = 16001524280109;
  x.__initData = __initData;
  const animatedStyle = useAnimatedStyle(x);
  const b = () => ({
    opacity: 1 - sharedValue.get()
  });
  b.__closure = {
    headerRightProgress: sharedValue
  };
  b.__workletHash = 5182160908530;
  b.__initData = __initData2;
  const animatedStyle2 = useAnimatedStyle(b);
  const memo = useMemo(() => {
    let r4 = game == null ? void 0 : game.getIconURL(32, SUPPORTS_WEBP ? "webp" : "png");
    if (r4 == null) {
      r4 = application == null ? void 0 : application.getIconURL(32, SUPPORTS_WEBP ? "webp" : "png");
    }
    if (r4 == null) {
      r4 = null;
    }
    return r4;
  }, [game, application]);
  let r21 = game?.name;
  if (r21 == null) {
    r21 = application?.name;
  }
  const r55 = r21 == null;
  const r56 = r55 ? null : <View style={styles.headerContainer}>
    <BackgroundBlurFill />
    <View style={styles.headerRow}>
      {memo != null && <Image2 source={{
        uri: memo
      }} style={styles.icon} />}
      <View style={styles.titleContainer}>
        <Heading variant="redesign/heading-18/bold" color="mobile-text-heading-primary" lineClamp={1}>{r21}</Heading>
        {game?.l30Rank != null && <View style={styles.rankPillContainer}>
          <GameProfileRankPill rank={game.l30Rank} compact />
          <ReanimatedRexport.View style={[StyleSheet.absoluteFill, animatedStyle2]}>
            <GameProfileRankPill rank={game.l30Rank} />
          </ReanimatedRexport.View>
        </View>}
      </View>
      {headerRight != null && <ReanimatedRexport.View style={[styles.headerRight, animatedStyle]}>
        {headerRight()}
      </ReanimatedRexport.View>}
    </View>
  </View>;
  return r56;
};