// Metro module 11906 (f11907).
import { useCallback, useEffect } from "react";
import { View, StyleSheet } from "react-native";
import AccessibilityStore from "../../a11y/AccessibilityStore";
import { jsx } from "react/jsx-runtime";
import { createStyles } from "../../../design/components/Styles/native/createStyles";
import Module712 from "../../../_bundle/Module712";
import { getHeaderCloseButton } from "../../../design/components/Navigator/native/NavigatorHeader.native";
import ModalActionCreators from "../../../actions/ModalActionCreators";
import { useFetchVirtualCurrencyBalance } from "../../virtual_currency/hooks/index";
import { BalanceWidgetPill } from "../../virtual_currency/native/index";
import { useStateFromStores } from "../../../_bundle/Module589";
import FastImage from "../../../components_native/common/FastImage";
import Module10972 from "../../../_bundle/Module10972";
import { VideoComponent } from "../../../components_native/common/Video";
import Module10973 from "../../../_bundle/Module10973";
import { SafeAreaPaddingView } from "../../../components_native/common/SafeAreaView";
import Module8713 from "../../../_bundle/Module8713";
import { Text } from "../../../design/components/Text/native/Text";
import { intl, t } from "../../../intl/index.native";
import { Button } from "../../../design/components/Button/native/Button.native";
import { pinUserProfileBadgesOnClient } from "../../user_profile/UserProfileActionCreators";
import { createOrbProfileBadge } from "./CollectiblesUtils";
import { Navigator } from "../../../design/components/Navigator/native/Navigator.native";
let useStyles, c8161_9;
const OrbBadgeCollectedRootScreen = function OrbBadgeCollectedRootScreen(props) {
  const { modalKey, onPressViewBadge } = props;
  const styles = useStyles();
  const stateFromStores = useStateFromStores([AccessibilityStore], () => AccessibilityStore.useReducedMotion);
  const callback = useCallback(() => {
    onPressViewBadge();
  }, [onPressViewBadge]);
  const callback2 = useCallback(() => {
    ModalActionCreators.popWithKey(modalKey);
  }, [modalKey]);
  return <View style={styles.root}>
    {stateFromStores ? <FastImage source={{
      uri: Module10972
    }} style={styles.background} /> : <VideoComponent source={{
      uri: Module10973
    }} poster={Module10972} style={styles.background} resizeMode="contain" muted pauseWhileAppInactive paused={false} />}
    <SafeAreaPaddingView style={styles.main} top bottom left right>
      <View style={styles.body}>
        <FastImage source={{
          uri: Module8713
        }} style={styles.orbBadge} />
        <View style={styles.bottomContainer}>
          <View style={styles.textContainer}>
            <Text variant="heading-xl/bold" color="text-overlay-light" style={styles.text}>
              {intl.string(t.Bal8Cv)}
            </Text>
            <Text variant="text-sm/medium" color="text-overlay-light" style={styles.text}>
              {intl.string(t.B25MUf)}
            </Text>
          </View>
          <View style={styles.buttonsContainer}>
            <Button onPress={callback} variant="primary" size="lg" text={intl.string(t.uYLGci)} />
            <Button onPress={callback2} variant="secondary" size="lg" text={intl.string(t["6gF4aS"])} />
          </View>
        </View>
      </View>
    </SafeAreaPaddingView>
  </View>;
};
useStyles = createStyles({
  root: {
    flex: 1
  },
  background: {
    ...StyleSheet.absoluteFillObject
  },
  orbBadge: {
    width: 172,
    height: 172,
    alignSelf: "center"
  },
  main: {
    flex: 1
  },
  body: {
    paddingTop: "50%",
    padding: Module712.space.PX_16,
    flex: 1,
    justifyContent: "space-between",
    gap: Module712.space.PX_32
  },
  bottomContainer: {
    alignSelf: "flex-end",
    alignItems: "stretch",
    gap: Module712.space.PX_32,
    width: "100%"
  },
  textContainer: {
    alignItems: "center",
    gap: Module712.space.PX_8
  },
  text: {
    textAlign: "center"
  },
  buttonsContainer: {
    alignItems: "stretch",
    gap: Module712.space.PX_16
  }
});
c8161_9 = {
  ROOT: "ROOT"
};
export default function OrbBadgeCollectedModal(props) {
  let modalKey2, onPressViewBadge2, orbBalancePriorToPurchase;
  const { modalKey: modalKey4, onPressViewBadge: onPressViewBadge3, orbBalancePriorToPurchase: orbBalancePriorToPurchase2 } = props;
  useEffect(() => {
    pinUserProfileBadgesOnClient([createOrbProfileBadge()], 600);
  }, []);
  modalKey2 = modalKey4;
  onPressViewBadge2 = onPressViewBadge3;
  orbBalancePriorToPurchase = orbBalancePriorToPurchase2;
  const screens = {};
  screens[c8161_9.ROOT] = {
    render: () => <OrbBadgeCollectedRootScreen modalKey={modalKey2} onPressViewBadge={onPressViewBadge2} />,
    ignoreKeyboard: true,
    fullscreen: true,
    headerLeft: () => {
      const modalKey3 = modalKey2;
      return jsx(getHeaderCloseButton(() => ModalActionCreators.popWithKey(modalKey3)), {
        tintColor: "white"
      });
    },
    headerRight: () => <BalanceWidgetPill initialRenderedBalance={orbBalancePriorToPurchase} balance={useFetchVirtualCurrencyBalance().balance} />,
    title: ""
  };
  return <Navigator screens={screens} initialRouteName={c8161_9.ROOT} />;
};