// Metro module 12318 (f12319).
import { memo } from "react";
import { StyleSheet, View } from "react-native";
import { createStyles } from "../../../../design/components/Styles/native/createStyles";
import Module712 from "../../../../_bundle/Module712";
import { isAndroid } from "../../../../utils/PlatformUtils";
import { useToken } from "../../../../design/tokens/native/useToken";
import { useMediaItemSpoilerState } from "../useMediaItemSpoilerState";
import ReanimatedRexport from "../../../reanimated/ReanimatedRexport";
import VisualEffectView from "../../../visual_effect_view/native/VisualEffectView";
import { ImageWarningIcon } from "../../../../design/components/Icon/native/redesign/generated/ImageWarningIcon";
import { Text } from "../../../../design/components/Text/native/Text";
import { intl, t } from "../../../../intl/index.native";
const useStyles = createStyles({
  spoilerOverlayContainer: {
    justifyContent: "center",
    alignContent: "center",
    flex: 1
  },
  obscureContentContainer: {
    gap: Module712.space.PX_4,
    justifyContent: "center",
    alignItems: "center",
    alignSelf: "center"
  },
  spoilerOverlayBackground: {
    paddingHorizontal: Module712.space.PX_16,
    borderRadius: Module712.radii.lg,
    height: Module712.space.PX_32,
    backgroundColor: isAndroid() ? Module712.unsafe_rawColors.PRIMARY_800 : Module712.unsafe_rawColors.PRIMARY_600,
    flexGrow: 0,
    justifyContent: "center",
    alignItems: "center",
    alignSelf: "center"
  }
});
const r59 = memo(function MediaModalSpoilerOverlay(props) {
  let r72;
  const { style, index, source } = props;
  const styles = useStyles();
  const token = useToken(Module712.colors.SPOILER_HIDDEN_BACKGROUND);
  const [r31, r9] = useMediaItemSpoilerState(index);
  let r32 = null;
  if (r31) {
    const r51 = [<VisualEffectView blurTheme={source.obscure ? "dark" : isAndroid() ? "dark" : "light"} android_fallbackColor={token} style={StyleSheet.absoluteFill} />, ,];
    const obscure = source.obscure;
    const props2 = {
      style: null,
      children: null
    };
    if (obscure) {
      props2.style = styles.obscureContentContainer;
      props2.children = [<ImageWarningIcon size="lg" color="white" />, <Text accessibilityRole="text" variant="heading-md/medium" color="text-overlay-light">
        {intl.string(t.SpxcUR)}
      </Text>];
      r72 = <View {...props2} />;
    } else {
      props2.style = styles.spoilerOverlayBackground;
      props2.children = <Text accessibilityRole="text" variant="heading-md/medium" color="text-overlay-light">
        {intl.string(t["F+x38C"]).toUpperCase()}
      </Text>;
      r72 = <View {...props2} />;
    }
    r51[1] = <View style={styles.spoilerOverlayContainer}>{r72}</View>;
    r32 = <ReanimatedRexport.View style={[style, StyleSheet.absoluteFill, r9]}>{r51}</ReanimatedRexport.View>;
  }
  return r32;
});
export default r59;