// Metro module 12302 (f12303).
import _slicedToArray from "../../../../_bundle/_slicedToArray";
import * as Module19 from "react";
import { useCallback, useMemo } from "react";
import { Pressable, StyleSheet } from "react-native";
import * as _Constants from "../Constants";
import { THUMBNAIL_WIDTH_MARGIN } from "../Constants";
import { useMediaItemSpoilerState } from "../useMediaItemSpoilerState";
import { useToken } from "../../../../design/tokens/native/useToken";
import Module712 from "../../../../_bundle/Module712";
import ReanimatedRexport, { useAnimatedProps } from "../../../reanimated/ReanimatedRexport";
import VisualEffectView from "../../../visual_effect_view/native/VisualEffectView";
import { isAndroid } from "../../../../utils/PlatformUtils";
import { createStyles } from "../../../../design/components/Styles/native/createStyles";
import FastImage from "../../../../components_native/common/FastImage";
import { useSelectedMediaSource } from "../MediaSourceUtil";
import REAWorkaroundView from "../../../reanimated/native/REAWorkaroundView";
import { AnimatedFastList } from "../../../../lib/native/FastList";
let useStyles, Component, __initData;
const ObscuredView = function ObscuredView(props) {
  let r28;
  L6: {
    const source = props.source;
    const [r20, r13] = useMediaItemSpoilerState(props.index);
    const token = useToken(Module712.colors.SPOILER_HIDDEN_BACKGROUND);
    r28 = null;
    if (r20) {
      if (!source.spoiler) {
        const obscure = source.obscure;
        r28 = null;
        if (!obscure) {
          break L6;
        }
      }
      r28 = <ReanimatedRexport.View style={[StyleSheet.absoluteFill, r13]}>
        <VisualEffectView blurTheme={isAndroid() ? "dark" : "light"} style={StyleSheet.absoluteFill} android_fallbackColor={token} />
      </ReanimatedRexport.View>;
    }
  }
  return r28;
};
const { THUMBNAIL_MARGIN, THUMBNAIL_HEIGHT } = _Constants;
useStyles = createStyles({
  containerPortrait: {
    height: 60
  },
  thumbnailButtonPortrait: {
    overflow: "hidden",
    marginHorizontal: THUMBNAIL_MARGIN,
    borderRadius: 2
  },
  thumbnailImagePortrait: {
    height: THUMBNAIL_HEIGHT,
    width: "100%"
  }
});
Component = Module19.memo(function({ source, numSources, selectedIndex: selectedIndex2, index, onSelect, useThumbnailStyle: useThumbnailStyle2 }) {
  const styles = useStyles();
  const source2 = Array.isArray(source) ? source[0] : source;
  const r25 = useThumbnailStyle2(source2, index);
  const props = {
    needsOffscreenAlphaCompositing: true,
    renderToHardwareTextureAndroid: true,
    accessibilityRole: "imagebutton",
    accessibilityLabel: `Thumbnail preview, ${index + 1} of ${numSources}`,
    accessibilityHint: "Double tap to focus",
    accessibilityState: {
      selected: selectedIndex2 === index
    },
    onPress: useCallback(() => onSelect(index), [onSelect, index]),
    children: null
  };
  let thumbnail = source2.thumbnail;
  if (thumbnail == null) {
    thumbnail = source2;
  }
  props.children = [<FastImage style={styles.thumbnailImagePortrait} source={thumbnail} enableAnimation={false} />, <ObscuredView source={source2} index={index} />];
  return <ReanimatedRexport.View style={[styles.thumbnailButtonPortrait, r25]}>
    <Pressable {...props} />
  </ReanimatedRexport.View>;
});
__initData = {
  code: "function MediaViewerThumbnailsTsx1(){const{scrollEnabled}=this.__closure;return{scrollEnabled:scrollEnabled.get()};}"
};
export default function MediaViewerThumbnails(props) {
  let selectedIndex;
  const syncer = props.syncer;
  selectedIndex = void 0;
  const styles = useStyles();
  const { sources, useThumbnailsProps, index: index2, onEndReached, onEndReachedThreshold, variableWidthThumbnailsEnabled, thumbnailScrollPositions } = syncer;
  const r30 = useThumbnailsProps(THUMBNAIL_WIDTH_MARGIN, sources.length - 1);
  const { ref, headerBufferSize, headerBufferStyle, footerBufferSize, footerBufferStyle, scrollEnabled, onScroll, onSelect: onSelect2, useThumbnailStyle, screenWidth, itemSize } = r30;
  const memo = useMemo(() => {
    const r5 = [];
    const length = thumbnailScrollPositions.length;
    let r0 = 0;
    if (0 < length) {
      do {
        const r1 = r0;
        if (variableWidthThumbnailsEnabled) {
          r5.push(thumbnailScrollPositions[r1].scrollStart);
        } else {
          r5.push(r1 * THUMBNAIL_WIDTH_MARGIN);
        }
        r0 = r1 + 1;
      } while (r0 < thumbnailScrollPositions.length);
    }
    return r5;
  }, [thumbnailScrollPositions, variableWidthThumbnailsEnabled]);
  selectedIndex = _slicedToArray(useSelectedMediaSource(syncer), 1)[0];
  const callback = useCallback((a0, a1) => <Component index={a1} source={sources[a1]} numSources={sources.length} selectedIndex={selectedIndex} onSelect={onSelect2} useThumbnailStyle={useThumbnailStyle} />, [sources, selectedIndex, onSelect2, useThumbnailStyle]);
  const memo2 = useMemo(() => [sources.length], [sources.length]);
  const n = () => ({
    scrollEnabled: scrollEnabled.get()
  });
  n.__closure = {
    scrollEnabled
  };
  n.__workletHash = 13439565264141;
  n.__initData = __initData;
  const animatedProps = useAnimatedProps(n);
  const callback2 = useCallback(() => <REAWorkaroundView style={headerBufferStyle} />, [headerBufferStyle]);
  const callback3 = useCallback(() => <REAWorkaroundView style={footerBufferStyle} />, [footerBufferStyle]);
  return <AnimatedFastList ref={ref} style={styles.containerPortrait} sections={memo2} stickyHeaderFooter disableContentWrappers automaticallyAdjustContentInsets={false} showsVerticalScrollIndicator={false} showsHorizontalScrollIndicator={false} initialScrollOrientation="center" initialScrollItem={useMemo(() => index2.get(), [index2])} itemSize={itemSize} renderItem={callback} onScroll={onScroll} horizontal headerSize={headerBufferSize} footerSize={footerBufferSize} renderHeader={callback2} renderFooter={callback3} onEndReached={onEndReached} endReachedThreshold={onEndReachedThreshold} chunkBase={screenWidth} snapToOffsets={memo} animatedProps={animatedProps} />;
};