// Metro module 14076 (f14077).
import { StyleSheet, View } from "react-native";
import AccessibilityStore from "../../../a11y/AccessibilityStore";
import Module712 from "../../../../_bundle/Module712";
import { createStyles } from "../../../../design/components/Styles/native/createStyles";
import { isAndroid, isIOS } from "../../../../utils/PlatformUtils";
import { APNGPlayer } from "../../../image/native/APNGPlayer.android";
import Module14077 from "../../../../_bundle/Module14077";
import { VideoComponent } from "../../../../components_native/common/Video";
import Module14078 from "../../../../_bundle/Module14078";
import useSafeAreaInsets_native from "../../../safe_area/useSafeAreaInsets.native";
import { useStateFromStores } from "../../../../_bundle/Module589";
import Module14079 from "../../../../_bundle/Module14079";
import { Text } from "../../../../design/components/Text/native/Text";
import { intl, t } from "../../../../intl/index.native";
import { OrbsIcon } from "../../../../design/components/Icon/native/redesign/generated/OrbsIcon";
import { Button } from "../../../../design/components/Button/native/Button.native";
let lg, useStyles;
const BountiesRecapOrbsBackground = function BountiesRecapOrbsBackground(props) {
  const { style, reducedMotion } = props;
  return isAndroid() ? <View style={style} needsOffscreenAlphaCompositing renderToHardwareTextureAndroid pointerEvents="none">
    <APNGPlayer url={Module14077} style={StyleSheet.absoluteFillObject} autoplay={!reducedMotion} />
  </View> : <VideoComponent source={{
    uri: Module14078
  }} style={style} resizeMode="contain" paused={reducedMotion} disableFocus preventsDisplaySleepDuringVideoPlayback={false} importantForAccessibility="no-hide-descendants" />;
};
lg = Module712.radii.lg;
useStyles = createStyles(() => ({
  root: {
    overflow: "hidden",
    borderRadius: lg,
    backgroundColor: Module712.colors.MOBILE_ACTIONSHEET_BACKGROUND
  },
  content: {
    flex: 1,
    paddingHorizontal: Module712.space.PX_24,
    justifyContent: "center",
    alignItems: "center"
  },
  centeredCopy: {
    alignItems: "center",
    width: "100%"
  },
  orbsBackground: {
    position: "absolute",
    top: 0,
    left: 0,
    right: 0,
    height: "40%",
    zIndex: 1
  },
  headerLabel: {
    paddingBottom: Module712.space.PX_4,
    textTransform: "uppercase"
  },
  titleRow: {
    flexDirection: "row",
    alignItems: "center",
    justifyContent: "center",
    paddingBottom: Module712.space.PX_24,
    gap: Module712.space.PX_8
  },
  actions: {
    position: "absolute",
    left: Module712.space.PX_24,
    right: Module712.space.PX_24,
    gap: Module712.space.PX_12
  },
  orbAmount: {
    marginTop: isIOS() ? 6 : 0,
    lineHeight: 46
  }
}));
export function BountiesScrollRecapPage(props) {
  const { orbAmount, onClose, style } = props;
  const styles = useStyles();
  const safeAreaInsets_native = useSafeAreaInsets_native();
  const stateFromStores = useStateFromStores([AccessibilityStore], () => AccessibilityStore.useReducedMotion);
  return <View style={[styles.root, style]} pointerEvents="box-none">
    <View style={StyleSheet.absoluteFillObject} pointerEvents="none">
      <VideoComponent source={{
        uri: Module14079
      }} style={StyleSheet.absoluteFillObject} resizeMode="cover" paused={stateFromStores} disableFocus preventsDisplaySleepDuringVideoPlayback={false} importantForAccessibility="no-hide-descendants" />
      <BountiesRecapOrbsBackground style={styles.orbsBackground} reducedMotion={stateFromStores} />
    </View>
    <View style={styles.content} pointerEvents="box-none">
      <View style={styles.centeredCopy} pointerEvents="none">
        <Text variant="text-xs/bold" color="text-brand" style={styles.headerLabel}>
          {intl.string(t.d6Rrn6)}
        </Text>
        <View accessible accessibilityRole="text" accessibilityLabel={`+${orbAmount}`}>
          <View style={styles.titleRow}>
            <OrbsIcon size="lg" color="icon-strong" accessible={false} />
            <Text variant="display-lg" color="text-strong" accessible={false} style={styles.orbAmount}>
              {`+${orbAmount}`}
            </Text>
          </View>
        </View>
        <Text variant="text-md/medium" color="text-muted" style={{
          textAlign: "center"
        }}>
          {intl.string(t.x0Ffz3)}
        </Text>
      </View>
      <View style={[styles.actions, {
        bottom: safeAreaInsets_native.bottom + Module712.space.PX_8
      }]}>
        <Button grow variant="primary" text={intl.string(t.i4jeWR)} size="lg" onPress={onClose} />
      </View>
    </View>
  </View>;
}