// Metro module 10971 (f10972).
import { useState, useCallback, useEffect, memo, useRef } from "react";
import { ActivityIndicator, StyleSheet, View } from "react-native";
import AccessibilityStore from "../../a11y/AccessibilityStore";
import UserStore from "../../../stores/UserStore";
import AppStateStore from "../../../stores/native/AppStateStore";
import { RewardFilterTypes } from "../QuestConstants";
import { Orientation } from "../../../Constants";
import ModalActionCreators from "../../../actions/ModalActionCreators";
import { createStyles } from "../../../design/components/Styles/native/createStyles";
import Module712 from "../../../_bundle/Module712";
import { OrbsIcon } from "../../../design/components/Icon/native/redesign/generated/OrbsIcon";
import { HeaderBackButton } from "../../../_bundle/Module5150";
import { XSmallIcon } from "../../../design/components/Icon/native/redesign/generated/XSmallIcon";
import { intl, t } from "../../../intl/index.native";
import FastImage from "../../../components_native/common/FastImage";
import { useAPNGPlayerControls, APNGPlayer } from "../../image/native/APNGPlayer.android";
import { isAndroid } from "../../../_bundle/Module501";
import Module10972 from "../../../_bundle/Module10972";
import { VideoComponent } from "../../../components_native/common/Video";
import Module10973 from "../../../_bundle/Module10973";
import Module10974 from "../../../_bundle/Module10974";
import Module10975 from "../../../_bundle/Module10975";
import Module10976 from "../../../_bundle/Module10976";
import { useStateFromStores } from "../../../_bundle/Module589";
import { useFetchVirtualCurrencyBalance } from "../../virtual_currency/hooks/index";
import { AppStates } from "../../../ConstantsIOS";
import { getQuestOrbRewardQuantityForUser } from "../utils/QuestRewardUtils";
import { lockOrientation, restoreDefaultOrientation } from "../../device/native/DeviceOrientation";
import { openQuestHome } from "./QuestUtils.native";
import { QuestContent } from "../QuestTypes";
import { SafeAreaPaddingView } from "../../../components_native/common/SafeAreaView";
import { Heading, Text } from "../../../design/components/Text/native/Text";
import { Button } from "../../../design/components/Button/native/Button.native";
let c7391_17, useStyles, useStyles2, useStyles3, CancelButton, Component3, Component2, Component, Component4, useStyles4, StaticOrb, AnimatedOrbContainer;
const OrbsBalance = function OrbsBalance(props) {
  const balance2 = props.balance;
  const styles3 = useStyles3();
  return <>
    <OrbsIcon size="xs" color={Module712.colors.WHITE} style={styles3.orbsIcon} />
    <View style={styles3.spacer} />
    {balance2}
  </>;
};
CancelButton = function CancelButton() {
  const styles = useStyles();
  return <HeaderBackButton onPress={function onPress() {
    ModalActionCreators.popWithKey(c7391_17);
  }} backImage={() => <XSmallIcon size="lg" style={[styles.closeButtonIcon]} />} accessibilityLabel={intl.string(t.cpT0Cq)} labelVisible={false} style={styles.closeButton} />;
};
StaticOrb = function StaticOrb() {
  return <View style={{
    width: "100%",
    height: "100%"
  }}>
    <FastImage source={{
      uri: Module10974
    }} style={useStyles4().animatedOrb} fade={false} />
  </View>;
};
AnimatedOrbContainer = function AnimatedOrbContainer(props) {
  const isAppActive = props.isAppActive;
  const styles4 = useStyles4();
  const [state, setState] = useState(false);
  const [state2, setState2] = useState(false);
  let [state3, setState3] = useState(true);
  const callback = useCallback(() => {
    setState(true);
  }, []);
  const callback2 = useCallback(() => {
    setState2(true);
  }, []);
  useEffect(() => {
    if (state && state2) {
      let c26885_0 = setTimeout(() => {
        setState3(false);
      }, 1450);
      return () => clearTimeout(c26885_0);
    }
  }, [state, state2]);
  const r50 = [(state ? !state : !state2) && <View style={{
    height: "100%"
  }} />, <Component uri={Module10975} style={[styles4.animatedOrb, (state3 ? state3 : !state2) && {
    opacity: 0
  }]} onLoad={callback2} animate={state3 ? !state3 : isAppActive} />, ,];
  if (state3) {
    state3 = <Component uri={Module10976} style={[styles4.animatedOrb]} onLoad={callback} animate={isAppActive} />;
  }
  r50[2] = state3;
  return <View style={{
    width: "100%",
    height: "100%"
  }}>{r50}</View>;
};
c7391_17 = "QuestOrbsRewardModal";
useStyles = createStyles({
  closeButton: {
    alignSelf: "flex-start",
    marginHorizontal: Module712.space.PX_16,
    zIndex: 999
  },
  closeButtonIcon: {
    tintColor: Module712.colors.WHITE
  }
});
useStyles2 = createStyles(() => ({
  root: {
    flex: 1,
    backgroundColor: Module712.colors.BACKGROUND_BASE_LOW
  },
  background: StyleSheet.absoluteFillObject,
  loading: {
    justifyContent: "center",
    alignItems: "center",
    backgroundColor: Module712.colors.BACKGROUND_BASE_LOW,
    ...StyleSheet.absoluteFillObject
  },
  header: {
    flexDirection: "row",
    alignItems: "flex-end",
    justifyContent: "flex-end"
  },
  main: {
    flex: 2
  },
  animation: {
    flex: 3
  },
  body: {
    flex: 2,
    flexDirection: "column",
    justifyContent: "center",
    gap: Module712.space.PX_16
  },
  title: {
    textAlign: "center",
    marginHorizontal: Module712.space.PX_32
  },
  buttonsContainer: {
    padding: Module712.space.PX_24,
    gap: Module712.space.PX_16
  }
}));
useStyles3 = createStyles({
  orbsIcon: {
    transform: [{
      translateY: 3
    }]
  },
  spacer: {
    width: 2
  }
});
Component3 = memo(function({ uri, onLoad, animate = true }) {
  useEffect(() => {
    FastImage.preload(uri);
  }, [uri]);
  return <FastImage key={`orb-animate-${animate}`} source={{
    uri
  }} style={{
    width: "100%",
    height: "100%"
  }} resizeMode="cover" enableAnimation={animate} onLoad={onLoad} usesSmallCache={false} fade={false} />;
});
Component2 = memo(function({ uri: uri2, onLoad, animate = true }) {
  let c18424_0 = animate;
  const ref = useRef(null);
  const aPNGPlayerControls = useAPNGPlayerControls(ref);
  useEffect(() => {
    if (c18424_0) {
      aPNGPlayerControls.play();
    } else {
      aPNGPlayerControls.stop();
    }
  }, [animate, aPNGPlayerControls]);
  return <APNGPlayer ref={ref} url={uri2} autoplay={false} style={{
    width: "100%",
    height: "100%"
  }} onLoad={onLoad} />;
});
Component = memo(function({ uri: uri2, style, onLoad, animate = true }) {
  return <View style={style} renderToHardwareTextureAndroid needsOffscreenAlphaCompositing>
    {isAndroid() ? <Component2 uri={uri2} onLoad={onLoad} animate={animate} /> : <Component3 uri={uri2} onLoad={onLoad} animate={animate} />}
  </View>;
});
Component4 = memo(function({ useReducedMotion, style, onStaticBgLoad, onAnimatedBgLoad, isAppActive }) {
  return <>
    <FastImage source={{
      uri: Module10972
    }} style={style} resizeMode="cover" onLoad={onStaticBgLoad} />
    {(useReducedMotion ? !useReducedMotion : isAppActive) && <VideoComponent source={{
      uri: Module10973
    }} style={style} resizeMode="cover" onLoad={onAnimatedBgLoad} disableFocus playInBackground preventsDisplaySleepDuringVideoPlayback={false} />}
  </>;
});
useStyles4 = createStyles({
  animatedOrb: {
    position: "absolute",
    height: "130%",
    width: "130%",
    left: "-15%",
    top: "-15%",
    pointerEvents: "none"
  }
});
export default function QuestOrbsRewardModal(props) {
  let balance, setState4, setState5;
  const quest = props.quest;
  balance = void 0;
  setState4 = void 0;
  setState5 = void 0;
  const styles2 = useStyles2();
  const stateFromStores = useStateFromStores([AccessibilityStore], () => AccessibilityStore.useReducedMotion);
  let balance2 = useFetchVirtualCurrencyBalance().balance;
  balance = balance2;
  let state;
  [state, setState4] = useState(false);
  let state2;
  [state2, setState5] = useState(false);
  const stateFromStores2 = useStateFromStores([AppStateStore], () => AppStateStore.getState());
  const ACTIVE = AppStates.ACTIVE;
  const stateFromStores3 = useStateFromStores([UserStore], () => UserStore.getCurrentUser());
  let count = quest.userStatus?.orbQuantityClaimed;
  if (count == null) {
    count = getQuestOrbRewardQuantityForUser(quest.config, stateFromStores3);
  }
  const isAppActive = stateFromStores2 === ACTIVE;
  useEffect(() => {
    lockOrientation(Orientation.PORTRAIT);
    return () => {
      restoreDefaultOrientation();
    };
  }, []);
  const callback2 = useCallback(() => {
    setState4(true);
  }, []);
  const callback3 = useCallback(() => {
    setState5(true);
  }, []);
  const callback = useCallback(() => {
    ModalActionCreators.popWithKey(c7391_17);
    openQuestHome({
      filter: RewardFilterTypes.VIRTUAL_CURRENCY,
      fromContent: QuestContent.REWARD_MODAL
    });
  }, []);
  const r95 = [<View style={StyleSheet.absoluteFill} accessible={false} accessibilityElementsHidden importantForAccessibility="no-hide-descendants">
    <Component4 useReducedMotion={stateFromStores} style={styles2.background} onStaticBgLoad={callback2} onAnimatedBgLoad={callback3} isAppActive={isAppActive} />
  </View>, (state ? !state : stateFromStores || !state2) && <View style={styles2.loading}>
    <ActivityIndicator animating />
  </View>, ,];
  if (!state) {
    state = stateFromStores ? !stateFromStores : state2;
  }
  if (state) {
    const r116 = [<View style={styles2.header}>
      <CancelButton />
    </View>, <View style={styles2.animation} accessible={false} accessibilityElementsHidden importantForAccessibility="no-hide-descendants">
      {stateFromStores ? <StaticOrb /> : <AnimatedOrbContainer isAppActive={isAppActive} />}
    </View>, , ,];
    const FIilK5 = t.FIilK5;
    if (count == null) {
      count = 0;
    }
    const r140 = [<Heading variant="heading-xl/bold" color="text-overlay-light" style={styles2.title}>
      {intl.format(FIilK5, {
        count
      })}
    </Heading>, ,];
    if (balance == null) {
      balance2 = 0;
    }
    r140[1] = <Text variant="text-md/normal" color="text-overlay-light" style={styles2.title}>
      {balance2 >= 4100 ? intl.format(t["2dz2AL"], {
        balanceHook: () => <OrbsBalance key="balance" balance={balance} />,
        profileDecoHook: () => <Text key="profileDeco" variant="text-md/semibold" color="text-overlay-light">
          {intl.string(t.pGDUH9)}
        </Text>
      }) : intl.format(t.rKHvlX, {
        balanceHook: () => <OrbsBalance key="balance" balance={balance} />
      })}
    </Text>;
    r116[2] = <View style={styles2.body}>{r140}</View>;
    r116[3] = <View style={styles2.buttonsContainer}>
      <Button onPress={callback} variant="primary" size="lg" text={intl.string(t.uJAMFX)} />
    </View>;
    state = <SafeAreaPaddingView style={[styles2.main]} top bottom left right>{r116}</SafeAreaPaddingView>;
  }
  r95[2] = state;
  return <View style={styles2.root}>{r95}</View>;
};
export function openQuestOrbsRewardModal({ quest }) {
  ModalActionCreators.pushLazy(async () => (await import("./QuestOrbsRewardModal.native")).default, {
    quest
  }, c7391_17);
}