// Metro module 8519 (f8520).
import { useRef, useCallback, useState, useEffect, useMemo } from "react";
import { Image as Image2, Pressable, ScrollView, View } from "react-native";
import { NOOP } from "../../../../_bundle/Module505";
import { createStyles } from "../../../../design/components/Styles/native/createStyles";
import Module712 from "../../../../_bundle/Module712";
import { GameProfileTrackActionActions } from "../../GameProfileAnalyticUtils";
import { openMediaModal } from "../../../media_viewer/native/components/openMediaModal";
import { createVideoControls, VideoComponent } from "../../../../components_native/common/Video";
import { isAndroid } from "../../../../_bundle/Module501";
import useWindowDimensions_native from "../../../screen/useWindowDimensions.native";
import { useObscuredSurface } from "../../../safety_common/ObscuredSurfaceContext";
import { getBestMediaProxySize, getDevicePixelRatio } from "../../../image_upload/ImageLoaderUtils";
import { getAssetURL } from "../../../../utils/StoreUtils";
import { HermesBuiltin } from "../../../../_hermes/prelude";
let width, useStyles, TrailerItem;
const ImageItem = function ImageItem(props) {
  const { url, index, sources, trackAction, width: width4, height: height2, onScrollToIndex, setMediaModalOpen } = props;
  const styles = useStyles();
  const ref = useRef(null);
  return <Pressable ref={ref} style={[styles.mediaItem, {
    width: width4,
    height: height2
  }]} onPress={useCallback(() => {
    trackAction(GameProfileTrackActionActions.ClickImage);
    setMediaModalOpen(true);
    openMediaModal({
      initialSources: sources,
      initialIndex: index,
      originViewOrOriginLayout: ref.current,
      analyticsSource: "game_profile",
      openAs: "action-sheet",
      onIndexChange: (a0) => onScrollToIndex(a0),
      onClose: () => setMediaModalOpen(false)
    });
  }, [sources, index, trackAction, onScrollToIndex, setMediaModalOpen])}>
    <Image2 source={{
      uri: url
    }} style={styles.mediaImage} />
  </Pressable>;
};
TrailerItem = function TrailerItem(props) {
  let ref4;
  const { url, posterUrl, active, index: index2, sources: sources2, trackAction: trackAction2, width: width4, height: height2, onScrollToIndex: onScrollToIndex2, setMediaModalOpen: setMediaModalOpen2 } = props;
  ref4 = void 0;
  const styles = useStyles();
  const ref2 = useRef(null);
  const ref3 = useRef(0);
  const [state, setState] = useState(0);
  const callback2 = useCallback((a0) => {
    ref3.current = a0;
  }, []);
  ref4 = useRef(createVideoControls(NOOP));
  ref4.current.useSubscribe(callback2, NOOP, NOOP);
  useEffect(() => {
    if (isAndroid() && !active) {
      setState((prevState) => prevState + 1);
    } else {
      ref4.current.seek(0);
    }
  }, [active]);
  return <Pressable ref={ref2} style={[styles.mediaItem, {
    width: width4,
    height: height2
  }]} onPress={useCallback(() => {
    trackAction2(GameProfileTrackActionActions.ClickTrailer);
    setMediaModalOpen2(true);
    openMediaModal({
      initialSources: sources2,
      initialIndex: index2,
      initialIndexVideoStartTime: ref3.current,
      originViewOrOriginLayout: ref2.current,
      analyticsSource: "game_profile",
      openAs: "action-sheet",
      onIndexChange: (a0) => onScrollToIndex2(a0),
      onClose: () => setMediaModalOpen2(false)
    });
  }, [trackAction2, sources2, index2, onScrollToIndex2, setMediaModalOpen2])}>
    <VideoComponent key={isAndroid() ? `render-${state}` : void 0} style={styles.mediaVideo} source={{
      uri: url
    }} poster={posterUrl} paused={!active} muted resizeMode="cover" pauseWhileAppInactive controls={ref4.current} />
  </Pressable>;
};
width = 1920;
useStyles = createStyles({
  container: {
    gap: Module712.space.PX_12,
    marginHorizontal: -Module712.space.PX_16
  },
  scrollView: {
    flexDirection: "row",
    overflow: "visible"
  },
  scrollViewContent: {
    gap: Module712.space.PX_12,
    paddingHorizontal: Module712.space.PX_16
  },
  mediaItem: {
    maxWidth: 366,
    maxHeight: 200,
    borderRadius: Module712.radii.lg,
    overflow: "hidden",
    ...Module712.shadows.SHADOW_HIGH
  },
  mediaImage: {
    width: "100%",
    height: "100%",
    resizeMode: "cover"
  },
  mediaVideo: {
    width: "100%",
    height: "100%",
    backgroundColor: Module712.colors.BLACK
  }
});
export default function GameProfileMedia(props) {
  let width3, height, memo, memo2, memo3, memo4, memo5, callback;
  const { game, trackAction: trackAction3 } = props;
  width3 = void 0;
  height = void 0;
  memo = void 0;
  memo2 = void 0;
  memo3 = void 0;
  memo4 = void 0;
  memo5 = void 0;
  callback = void 0;
  const styles = useStyles();
  const width2 = useWindowDimensions_native().width;
  const obscured = useObscuredSurface().obscured;
  const [state, setState2] = useState(0);
  const [state2, setState3] = useState(0);
  const [state3, setState4] = useState(false);
  const ref5 = useRef(null);
  [width3, height] = useMemo(() => {
    const bestMediaProxySize = getBestMediaProxySize(Math.min(width2, width) * getDevicePixelRatio());
    return [bestMediaProxySize, bestMediaProxySize / 1.83];
  }, [width2]);
  const callback2 = useCallback((a0) => {
    setState2(a0.nativeEvent.layout.width);
  }, []);
  memo = useMemo(() => {
    let r10;
    if (game == null) {
      r10 = [];
    } else {
      let trailers = game.trailers;
      if (trailers == null) {
        trailers = [];
      }
      const r8 = trailers.map((trailer) => ({
        type: "trailer",
        url: getAssetURL(trailer.application_id, trailer.id, 1920, "mp4"),
        thumbnailUrl: getAssetURL(trailer.application_id, trailer.id, Math.min(width2, width), "webp")
      }));
      r10 = [];
      const r0 = HermesBuiltin.arraySpread(r10, r8, 0);
      let screenshotUrls = game.screenshotUrls;
      if (screenshotUrls == null) {
        screenshotUrls = [];
      }
      HermesBuiltin.arraySpread(r10, screenshotUrls.map((screenshotUrl) => ({
        type: "image",
        url: screenshotUrl,
        thumbnailUrl: screenshotUrl.replace.call(screenshotUrl, /size=\d+/g, `size=${width3}`)
      })), r0);
    }
    return r10;
  }, [game, width3, width2]);
  memo2 = useMemo(() => Math.max(0, Math.min(366, state - Module712.space.PX_12 - 2 * Module712.space.PX_16)), [state]);
  memo3 = useMemo(() => Math.min(200, memo2 / 1.83), [memo2]);
  memo4 = useMemo(() => memo.map((item, index) => ({
    uri: item.url,
    videoURI: item.type === "trailer" ? item.url : void 0,
    mediaIndex: index,
    width,
    height: 1080,
    thumbnail: {
      width: width3,
      height,
      uri: item.thumbnailUrl
    },
    accessoryType: "embed",
    disableDownload: true
  })), [memo, width3, height]);
  memo5 = useMemo(() => {
    let c26212_0 = (state - memo2 - 2 * Module712.space.PX_16) / 2;
    let c26212_1 = memo2 + Module712.space.PX_12;
    return memo.map((item, index) => Math.max(0, index * c26212_1 - c26212_0));
  }, [memo, state, memo2]);
  const callback3 = useCallback((a0) => {
    let length;
    if (memo5.length !== 0) {
      const r11 = a0.nativeEvent.contentOffset.x;
      const r20 = Math.abs(memo5[0] - r11);
      const r6 = 1 < memo5.length;
      let r2 = 1;
      let r22 = r20;
      let r1 = 0;
      let r23 = 0;
      if (r6) {
        do {
          const r28 = Math.abs(memo5[r2] - r11);
          const r3 = r2;
          let r29 = r22;
          let r0 = r1;
          if (r28 < r29) {
            r29 = r28;
            r0 = r3;
          }
          r2 = r3 + 1;
          length = memo5.length;
          r22 = r29;
          r1 = r0;
          r23 = r1;
        } while (r2 < length);
      }
      setState3(r23);
    }
  }, [memo5]);
  callback = useCallback((a0) => {
    const current = ref5.current;
    if (current != null) {
      current.scrollTo({
        x: memo5[a0],
        y: 0,
        animated: false
      });
    }
    setState3(a0);
  }, [memo5]);
  return memo.length !== 0 ? <View style={styles.container} onLayout={callback2}>
    <ScrollView ref={ref5} horizontal showsHorizontalScrollIndicator={false} style={styles.scrollView} contentContainerStyle={styles.scrollViewContent} decelerationRate="fast" snapToOffsets={memo5} snapToStart={false} snapToEnd={false} onMomentumScrollEnd={callback3}>
      {memo.map((item, a1) => item.type === "trailer" ? <TrailerItem key={`${item.url}-${a1}`} url={item.url} posterUrl={item.thumbnailUrl} active={(obscured ? !obscured : !state3) && state2 === a1} index={a1} sources={memo4} trackAction={trackAction3} width={memo2} height={memo3} onScrollToIndex={callback} setMediaModalOpen={setState4} /> : <ImageItem key={`${item.url}-${a1}`} url={item.url} index={a1} sources={memo4} trackAction={trackAction3} width={memo2} height={memo3} onScrollToIndex={callback} setMediaModalOpen={setState4} />)}
    </ScrollView>
  </View> : null;
};